Progress

インポート

import { Progress } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Progress } from '@caroainc/ui-components/progress'

基本的な使い方

<Progress value={60} />

様々な進捗値

25%

50%

75%

100%

<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

バリアント

<Progress value={60} variant="base" />
<Progress value={60} variant="primary" />

Indeterminate（進捗値が不明な場合）

value を undefined（または null）にすると、進捗値が不明な状態として扱われます。バーの一部が流れるようにアニメーションし、「処理中だが進捗率は分からない」ことを示します（内部的にRadixが data-state="indeterminate" を付与し、スクリーンリーダーにも進捗不明として伝わります）。

{/* value を渡さない、または undefined を渡す */}
<Progress />

Props

Prop	Type	Default	Description
`value`	`number \| null \| undefined`	`undefined`	進捗値（0-100）。undefined/nullの場合はindeterminate（進捗不明）表示になる
`max`	`number`	`100`	最大値
`variant`	`'base' \| 'primary'`	`'base'`	バーの色バリアント