Demo
Example
Color
1<Meter value={25} label="Example"/>import { Meter } from "@dapper-ui/core";1<Meter 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 meter.
It is highly recommended to label the meter 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 meter as a percentage.
However, if this doesn't accurately reflect the meter's current
status, you should use the ariaValuetext prop to provide a more accurate
text description of the current value.
number0The current value of the meter.
Should be between the min and max values.
number0The minimum value of the meter.
number100The maximum value of the meter.
string | undefinedundefinedCustom CSS styles to apply.
Especially useful for positioning styles like margings.