StatusDot

8px 的语义圆点及其文字。状态从不只靠颜色表达。

ActiveExpiringDownSyncingArchivedLive

<div className="flex flex-col gap-8">
      <StatusDot tone="success">Active</StatusDot>
      <StatusDot tone="warning">Expiring</StatusDot>
      <StatusDot tone="danger">Down</StatusDot>
      <StatusDot tone="info">Syncing</StatusDot>
      <StatusDot tone="neutral">Archived</StatusDot>
      <StatusDot tone="success">Live</StatusDot>
    </div>

import { StatusDot } from "@logicplanes/kaeso-ui";

属性

children
ReactNode
承载含义的文字。
size
"md" | "sm" = md
圆点的尺寸。
tone
"neutral" | "success" | "warning" | "danger" | "info" = neutral
圆点标记的状态；旁边应有表达相同含义的文字。