BlueAI StatusDot
2px の小さなカラードットでステータスを示す。テキストと組み合わせて使用する。
|
import { StatusDot } from "@blueai/ui"Examples
プリセットカラー
オンライン
オフライン
離席中
取込中
不明
アクティブ
<StatusDot color="green" /> オンライン
<StatusDot color="red" /> オフライン
<StatusDot color="amber" /> 離席中
<StatusDot color="blue" /> 取込中
<StatusDot color="gray" /> 不明
<StatusDot color="brand" /> アクティブカスタム HEX カラー
カスタム紫
カスタムピンク
<StatusDot hex="#8b5cf6" /> カスタム紫
<StatusDot hex="#ec4899" /> カスタムピンクProps
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "green" | "red" | "amber" | "blue" | "gray" | "brand" | — | プリセットカラー（hex と排他） |
| hex | string | — | 任意HEXカラー（color と排他） |
| className | string | — | 追加CSSクラス |