BlueAI ProgressBar
進捗状況を表示するプログレスバーコンポーネント。バリアントとサイズに対応。
|
import { ProgressBar } from "@blueai/ui"Examples
Variants
アップロード中75%
完了100%
注意50%
容量不足30%
<ProgressBar value={75} variant="brand" label="アップロード中" />
<ProgressBar value={100} variant="success" label="完了" />
<ProgressBar value={50} variant="warning" label="注意" />
<ProgressBar value={30} variant="error" label="容量不足" />Sizes
<ProgressBar value={60} size="sm" />
<ProgressBar value={60} size="md" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | 進捗値（0-100） |
| variant | "brand" | "success" | "warning" | "error" | — | 色バリアント（デフォルト: brand） |
| size | "sm" | "md" | — | サイズ（デフォルト: md） |
| label | string | — | ラベル（パーセンテージも自動表示） |