Progress
Progress is a beautiful progress bar component.
Code Example
<Progress value="10" />Components
Progress is a standalone component.
Progress
Progress can be customized with the following props:
| Prop | Type | Description |
|---|---|---|
value | number | sets the progress amount default: 0 |
max | number | sets the max progress amount default: 100 |
color | string | Sets the button color to one of the below prop names. |
| neutral | boolean | Sets the color to neutral. |
| primary | boolean | Sets the color to primary. |
| secondary | boolean | Sets the color to secondary. |
| accent | boolean | Sets the color to accent. |
| info | boolean | Sets the color to info. |
| success | boolean | Sets the color to success. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
Color
There are two ways of specifying color:
- The
primary,secondary,neutral,accent,info,success,warning, anderrorboolean props. - The
colorprop, which accepts a string with any of the above prop names.
Code Example
<Progress value="10" primary />Size
You can customize Progress size using TailwindCSS utility classes. This example sets the height using h-6 and adds rounded-full:
Code Example
<Progress value="10" class="h-6 rounded-full" />