Skip to main content

Progress Bar

The <Progress/> component allows to select or deselect options in a form. It provides a customizable checkbox input with various options.

Source@matro-ui/Progress

Import​

import { Progress } from "matro-ui";
  • Progress: Progress bar component

Usage​

Loading...
Live Editor
<label>
 <LabelText>Example of {`<Progress/>`}, 10%</LabelText>
 <Progress value={10} />
</label>

Bar Height​

To change the height of <Progress/>, simply set the height prop (val. string | number):

Loading...
Live Editor
<label>
 <LabelText>Example of {`<Progress/>`}, 90%</LabelText>
 <Progress value={90} height="3" />
</label>

Color Scheme​

To change the color of <Progress/>, set the colorScheme prop (val. "red" | "orange" | "yellow" | "green" | "cyangreen" | "cyanblue" | "blue" | "purple" | "pink"):

Loading...
Live Editor
<label>
 <LabelText>Example of {`<Progress/>`}, 50%</LabelText>
 <Progress colorScheme="pink" value={50} height="3" />
</label>