图标按钮就绪 Storybook
`IconButton` 是仅显示图标的可操作按钮。由于没有标准标签，因此为所有图标按钮添加工具提示至关重要，以便在悬停时可以访问标签。
加载中...
实时编辑器
<IconButton tooltip="Add new" name="plus" />
建议
- 始终在工具提示中包含按钮的标签。
- 在工具提示没有意义且图标明确的特殊情况下（例如，用于展开文件夹），添加 aria-label，此时将移除工具提示。
- 当将 `IconButton` 与文本一起使用时，通过添加一个具有 `display: flex` 和 `align-items: center` 样式的包装元素来确保它们对齐。
- 在空间有限且上下文较低的环境中使用。
- 确保图标的意义清晰明确。
- 仅需要图标时，使用 `IconButton` 而非 `Button`。
不建议
- 避免在上下文较高的情境中使用。
类型和行为
变体
| 类型 | 样式 | 用途 |
|---|---|---|
| 主类型 | 幽灵类型 | 用于基于主类型的操作。每个部分只使用一个。如果没有主类型操作，所有 Button 组件都应为次类型。 |
| 次类型 | 幽灵类型 | 这是按钮的默认样式。它在 Grafana 中使用最频繁，可以触发多种操作。 |
| 破坏性类型 | 幽灵类型 | 用于删除操作。 |
| 禁用状态 | 幽灵类型 | 如果图标按钮提供的功能当前不可用，但图标按钮需要指示该功能存在，则使用此状态。 |
构成
- 图标
- 容器（悬停时）
布局
`IconButton` 最适合在空间有限且操作繁多的区域使用。这些区域可以是工具栏，或者提供行内编辑的区域，如表格或卡片。
按钮尺寸
| 图标尺寸 | Figma 中的名称和尺寸 | 代码中的名称和尺寸 |
|---|---|---|
| 12像素 | 小号: 20像素 | 超小号: 20像素 |
| 14像素 | 小号: 22像素 | |
| 16像素 | 中号: 28像素 | 中号: 24像素 |
| 18像素 | 大号: 26像素 | |
| 24像素 | 大号: 48像素 | 特大号: 32像素 |
| 24像素 | 超特大号: 32像素 | |
| 24像素 | 超超特大号: 32像素 |
可访问性
- 为工具提示添加文本（该文本也将用作 aria-label）
- 在工具提示没有意义的特殊情况下，添加 aria-label。
行为
悬停
悬停时，`IconButton` 会显示一个包含图标按钮标签的工具提示。