Progress

Stable

Progress bars and indicators with multiple color variants.

Import

import { Progress } from '@brutal-ui/react';

Basic Usage

Loading65%

const [value, setValue] = useState(65);

<Progress value={value} />

Color Variants

Primary (Black)

Success (Green)

Warning (Yellow)

Danger (Red)

<Progress value={75} color='primary' />
<Progress value={80} color='success' />
<Progress value={45} color='warning' />
<Progress value={25} color='danger' />

Use Cases

File Upload3 of 5 files

Profile Completion8/10 steps

Storage Usage89 GB of 100 GB

Props

Prop	Type	Default	Description
value	number	0	Progress value (0-100)
color	string	"primary"	Color variant