@k2b/ui
Progress
Determinate progress in compact sizes and semantic tones.
ProgressBar@k2b/ui
Determinate progress in semantic tones and three compact sizes.
72%
38%
16%
TSX
Copy<ProgressBar value={72.4} label="Upload progress" tone="success" showValue /><ProgressBar value={38} label="Indexing" size="sm" showValue /><ProgressBar value={16} label="Storage limit" tone="danger" size="xs" showValue />ProgressBar presents determinate progress from 0 to 100.
Use progress
Use the default tone for ordinary work, success for a positive completion state, and danger when the progress itself represents a limit or failing state.
Import
import { ProgressBar } from "@k2b/ui";Accessibility
Pass a task-specific label. Tone supplements the numeric value and must not carry meaning alone.
Runtime
ProgressBar renders on the server and needs no hydration for its initial value.
Example
<ProgressBar value={72.4} label="Upload progress" tone="success" showValue />