Button准备就绪 Storybook
用于触发操作的可点击元素。按钮传达用户与之交互时将发生的操作。
正在加载...
实时编辑器
<Button>Save</Button>
应做
- 当按钮处于同一组时，所有按钮应采用容器相同的宽度。
- 在按钮组中，仅使用一个主按钮和两个具有相同较低强调度的按钮。
- 在按钮组中，保持使用图标或不使用图标与文本标签的风格一致性。
不应做
- 不要在按钮组中使用两个主按钮。
- 不要在按钮组中同时使用带图标的按钮和不带图标的按钮。
- 不要有多个主操作。
- 不要将实心主按钮与实心破坏性按钮配对使用 - 其中一个必须优先于另一个。
- 不要仅使用带有图标的按钮（如果无法避免，请务必添加用于工具提示和 aria 标签的文本，因为它们是满足可访问性要求的必需项）
强调度
- 高： 用于屏幕上最重要和最常见的操作。这些是主按钮和破坏性按钮
- 默认： 用作次要操作，同一页面上可以有多个。这是 Grafana 中最常见的按钮用法。
- 低： 是页面上的补充操作或可选链接。
变体
| 类型 | 组件 | 强调度 | 目的 |
|---|---|---|---|
| 主要 | 带标签填充 带图标 + 标签填充 带标签 + 图标填充 带图标 + 标签 + 图标填充 | 高 | 用于“行动呼吁”，即触发主要操作。每个页面上不应超过一个。如果需要多个按钮进行不同操作，请确定哪个操作最重要，并将其设为主要按钮。所有其他按钮组件应为次要。如果没有主操作，所有按钮组件都应为次要。 |
| 次要 | 填充 描边 Ghost | 默认 | 次要按钮是默认按钮样式，可触发各种操作。其用法取决于其周围环境：1. 当位于主要按钮旁边时，次要样式可用于“取消”或“中止”等操作。2. 当给定页面上没有主要重要操作时，所有按钮组件应使用次要样式。 |
格式化
结构
按钮尺寸与标签排版
| 尺寸 | 宽度-高度 (像素 - rem) | 字体大小 | 字体粗细 |
|---|---|---|---|
| 小 | 自动 - 24像素 | 12像素 | 500 |
| 中 | 自动 - 32像素 | 14像素 | 500 |
| 大 | 自动 - 48像素 | 18像素 | 500 |
层级与按钮配对
-
主要/破坏性按钮 — 高强调度
单个页面应只显示一个用于主要操作的最重要按钮。其他按钮应具有较低强调度，并在 UI 中视觉上有所不同。此主要按钮必须吸引用户的注意力。
-
次要/图标按钮 — 默认强调度
单个屏幕上可以显示多个按钮，其他按钮可以与主要按钮位于同一页面上，这些按钮在操作上必须不那么重要，并且不会分散用户对主要页面内容的注意力。您只应将相互关联的行动呼吁进行分组。一个高强调度的按钮可以与多个低强调度的按钮配对使用。
-
描边/文本按钮 — 低强调度
这些按钮影响较小，对用户注意力的分散也较少，同一屏幕上可以使用多个。它们是可操作的，可以将用户带到新页面，主要目的是提供有关该部分的更多信息。
外边距与内边距
| 类型 | 外边距 | 内边距 |
|---|---|---|
| 小 | 0px 8px 0px 0px | 0px 8px |
| 中 | 0px 0px 0px 16px | 0px 16px |
| 大 | 0px 0px 0px 16px | 0px 16px |
放置位置
-
主要
- 页面右上角
- 内容页面中央
-
默认
- 卡片内部右下角
- 内容页面左下角
-
文本链接
- 卡片内部右上角
- 卡片内部底部中央
可访问性
- 使用按钮时使用 ARIA 标签以确保可访问性。
- 例如，由图标表示的按钮，可访问名称可以从 aria-label 或 aria-labelledby 属性提供。
- 使用 role="button" 代替语义化的 <button> 或 <input type="button">（iOS 对 role="button" 的“可点击元素”修复）