Components
Progress
Live examples of progress component.
Usage
<Progress
maxValue={100}
values={[
{ value: 50, color: 'green', label: 'Donations' },
{ value: 20, color: 'orange', label: 'Sponsorship' }
]}
/>
Values
Each object inside value array should have this structure:
{
value: 50, // Numeric value
color: 'green', // Any valid CSS color HEX, RGBA, HSLA, etc.
label: 'Spel online' // Readable label for screen readers
}
Properties
Progress
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| className | string | Add custom class | |
| maxValue * | number | Max Value of the progress bar. | |
| values * | arrayOf | Values for the progress bar with colors and label for each value. For the color string any css valid value is ok. i.e 'green' or '#00ff00' or rgba(0, 255, 0, 1). The label is used for screen readers and should be a human readable string. |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
Additional information regarding accessibility of this component below.
• Uses role="progressbar" for screen reader support.
• Includes aria-valuemin, aria-valuemax, and aria-valuenow for better context.
• Hidden screen-reader text provides meaningful descriptions.