Components

StatusBadge 状态徽章

面向控制台服务治理、任务管道、容器节点与资源巡检的语义化状态标识，内置状态圆点与呼吸动效。

核心状态语义

支持 online、offline、degraded、pending、info 与 neutral 预设语义。

OnlinePendingDegradedOfflineInfoUnknown

<div class="flex flex-wrap gap-3">
  <StatusBadge status="online" />
  <StatusBadge status="pending" />
  <StatusBadge status="degraded" />
  <StatusBadge status="offline" />
  <StatusBadge status="info" />
  <StatusBadge status="neutral" />
</div>

视觉变体与自定义文案

支持 subtle、soft、outline、solid 四种层级，并可覆盖展示文本或关闭圆点。

Cluster HealthyCluster HealthyCluster HealthyCluster Healthy

No DotCritical AlertDeployingDeployingDeploying

<div class="flex flex-wrap items-center gap-3">
  <StatusBadge status="online" variant="subtle" label="Cluster Healthy" />
  <StatusBadge status="online" variant="soft" label="Cluster Healthy" />
  <StatusBadge status="online" variant="outline" label="Cluster Healthy" />
  <StatusBadge status="online" variant="solid" label="Cluster Healthy" />
</div>

API 参考

属性	类型	默认值	说明
`status`	`'online' \| 'offline' \| 'degraded' \| 'pending' \| 'info' \| 'neutral'`	`'online'`	核心状态语义。
`label`	`string`	`''`	自定义展示文本。缺省使用状态内置英文标识。
`variant`	`'subtle' \| 'soft' \| 'outline' \| 'solid'`	`'subtle'`	视觉层级变体。
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	尺寸规格。
`dot`	`boolean`	`true`	是否展示前置状态圆点。
`pulse`	`boolean`	`undefined`	是否开启圆点呼吸动效。缺省对 online 与 pending 启用。