Components

Badge 徽章

轻量状态标签，适合版本、运行状态和不打断阅读的辅助信息。支持微光状态圆点与四档尺寸。

变体与色彩

主色、中性与语义状态色，dot 属性渲染呼吸圆点。

SolidOutlineSoftSubtleWith Dot

NeutralOperationalDegradedOutage

<div class="demo-grid">
  <Badge variant="solid" color="primary">Solid</Badge>
  <Badge variant="outline" color="primary">Outline</Badge>
  <Badge variant="soft" color="primary">Soft</Badge>
  <Badge variant="subtle" color="primary">Subtle</Badge>
  <Badge variant="soft" color="primary" dot>With Dot</Badge>
</div>
<div class="demo-grid mt-3 pt-3 border-t border-slate-100 dark:border-slate-800">
  <Badge variant="subtle" color="neutral">Neutral</Badge>
  <Badge variant="soft" color="success" dot>Operational</Badge>
  <Badge variant="soft" color="warning" dot>Degraded</Badge>
  <Badge variant="soft" color="error" dot>Outage</Badge>
</div>

API 参考

属性	类型	默认值	说明
variant	'solid' \| 'outline' \| 'soft' \| 'subtle'	soft	视觉变体。
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'error'	primary	语义色。
size	'xs' \| 'sm' \| 'md' \| 'lg'	sm	字号与内边距。
dot	boolean	false	左侧状态呼吸圆点。