Skip to content

Badge ​

小型状态徽章。支持颜色变体与纯圆点(dot)模式,用于状态标识等紧凑场景。

基础 ​

defaultsuccesswarningdangerinfo
vue
<h-badge>default</h-badge>
<h-badge variant="success">success</h-badge>
<h-badge variant="warning">warning</h-badge>
<h-badge variant="danger">danger</h-badge>
<h-badge variant="info">info</h-badge>

尺寸 ​

smmd
vue
<h-badge size="sm">小号</h-badge>
<h-badge size="md">中号</h-badge>

Dot 模式 ​

vue
<h-badge dot variant="success" aria-label="运行中" />
<h-badge dot variant="warning" aria-label="警告" />
<h-badge dot variant="danger" aria-label="错误" />

API ​

Props ​

名称类型默认说明
variant'default' | 'success' | 'warning' | 'danger' | 'info''default'颜色变体
size'sm' | 'md''md'尺寸
dotbooleanfalse仅显示圆点(无文字)
ariaLabelstring—dot 模式或无可见文字时的可访问名称

Slots ​

名称说明
default徽章文字内容(dot 模式时可用作 aria-labelledby 后备)

MIT License