通用组件 / 09
按钮风格
十个视觉层级、一条判断标准：一屏里只允许出现一个主按钮。本页给出全部风格的实样、图标按钮、禁用态，以及它们在表单底部、卡片操作、表格行与工具栏里的真实用法。
十种风格
.btn + .btn-*主层级 · 强调操作
btn-primary
反色实心，整屏唯一。提交、保存、创建、支付。
btn-secondary
白底描边。取消、返回、次级并列操作。
btn-soft
浅灰底无边。工具栏、筛选、轻量触发。
语义层级 · 危险与状态
删除是不可逆的
删除类操作统一用 btn-danger 实心 + 二次确认；仅在危险等级较低（如移除草稿）时才降级为 btn-outline-danger。
风格 × 尺寸矩阵
| 场景 | 推荐风格 | 示例 |
|---|---|---|
| 页面主操作 | btn-primary · btn-lg | |
| 弹窗确认 | btn-danger · 默认尺寸 | |
| 表格行操作 | btn-link · btn-sm | |
| 批量工具 | btn-soft · btn-sm |
图标按钮
.btn-sq / svg 14px图标 + 文字
图标统一 1.9px 描边、14px 见方，写在按钮文字之前，按钮内部自动留 8px 间距。
纯图标 · 方形
方形按钮 44 × 44，小号 34 × 34；纯图标必须带 aria-label，否则读屏用户只会听到"按钮"。
带角标与状态
图标按钮上的角标用 .badge 绝对定位到右上角；状态点用 .status 系列，颜色由状态决定。
禁用与不可用
:disabled / .is-disabled全风格禁用态
原生 disabled 即可，透明度降到 38% 并屏蔽指针事件；用 .is-disabled 可以给 <a> 做同样的效果。
表单底部的可用性判断
该名称已被占用，请更换
表单操作区
资料未通过校验，提交按钮保持禁用
真实场景组合
card / table / toolbar卡片底部操作
主操作在右、次操作在左，两端对齐时用 justify-between。
表格行操作
hero-banner-01.png
2.4 MB · 2026-10-03
product-shot-08.jpg
1.1 MB · 2026-10-03
工具栏与反馈触发
危险区
删除整个工作区
该操作会移除工作区内全部页面与素材，且无法撤销。