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`	左侧状态呼吸圆点。