Progress
Horizontal bar indicating task completion.
Installation
npx dafink-ui add progressDemo
Progress70%
Progress90%
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | - | Current value (0–max). |
| max | number | 100 | Maximum value. |
| showLabel | boolean | false | Show "Progress X%" label row. |
| size | 'sm' | 'md' | 'lg' | 'md' | Track height. |
| className | string | '' | Additional CSS classes. |
Accessibility
Progress's track has role="progressbar" with aria-valuenow, aria-valuemin=0, and aria-valuemax kept in sync with props, so assistive tech announces the numeric value even when showLabel is false; the fill bar itself carries no ARIA of its own. Progress has no focusable elements or keyboard behavior — add a wrapping aria-labelwhen the bar isn't already next to descriptive text.