Badge 徽标
以紧凑标签突出状态、分类或数量等辅助性短信息。
使用概览
适合使用
- 需要在标题或列表项旁快速标记状态与类别时。
不建议使用
- 信息需要解释、交互或承载较长文本内容时。
真实示例
成功状态徽标
用简短文字标记内容已经发布。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/badge.json基础用法
导入
import { Badge } from "@richardqiu/quartz/badge";JSX
<Badge tone="success">已发布</Badge>状态与控制摘要
默认
tone · default / info / success / warning / destructivechildren · textAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tone | "default" | "info" | "success" | "warning" | "destructive" | "default" | 选择与状态含义匹配的语义颜色。 |
组合结构
- 01
Badge
键盘约定
- Badge 不增加键盘行为；需要操作时应使用独立控件。
可访问性契约
- 色调只辅助视觉扫描，不能替代明确的状态文字。
- Badge 不自动承担 status 或 alert 语义；动态播报由使用方设置。