core
Progress
Tones
Dining74%
Import
import { Progress } from '@connor-adams/designsystem'Usage
A determinate bar for budgets, savings goals, and import progress. Use tone to signal state (e.g. danger when a category is over budget).
<Progress value={68} label="Groceries budget" showValue />
<Progress value={104} tone="danger" label="Dining" showValue />
<Progress indeterminate label="Importing statement…" />
Variants: tone="primary|success|warning|danger", size="sm|default|lg", indeterminate, label, showValue.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | undefined | 0 | |
| tone | (string & {}) | "success" | "primary" | "danger" | "warning" | undefined | primary | |
| size | "sm" | "lg" | "default" | undefined | default | |
| indeterminate | boolean | undefined | false | |
| label | ReactNode | — | |
| showValue | boolean | undefined | false |