Demo
Example
Color
1<ProgressBar value={25} label="Example"/>import { ProgressBar } from "@dapper-ui/core";1<ProgressBar value={25} label="Example"/>hideLabel prop. This ensures that the label is still accessible to users
who rely on assistive technologies such as screen readers.
ariaValuetext prop to provide a more accurate text description of the current value.
stringAutogenerated random IDThe id of the label element.
string | undefinedundefinedThe name of a color in the theme. Does not support arbitrary colors.
When set to undefined, the primary color of the theme will be used.
Radius | undefinedundefinedThe border radius of the button. When set to undefined, the button will
have the default border radius defined in the theme.
string | undefinedNoneA label for the progress bar.
It is highly recommended to label the progress bar for accessibility
purposes. Even if you do not want to display the label for aesthetic
reasons, you should still set a label and hide it with the hideLabel
prop. This ensures that the label is still accessible to users who rely
on assistive technologies such as screen readers.
booleanfalseVisually hides the label.
string | undefinedundefinedThe aria-valuetext attibute.
Screen readers usually read the value of a progress bar as a percentage.
However, if this doesn't accurately reflect the progress bar's current
status, you should use the ariaValuetext prop to provide a more accurate
text description of the current value.
booleanfalseWhether the progress bar is indeterminate.
number0The current value of the progress bar.
Should be between the min and max values.
number0The minimum value of the progress bar.
number100The maximum value of the progress bar.
string | undefinedundefinedCustom CSS styles to apply.
Especially useful for positioning styles like margings.