Progressbar
A basic widget for showing the work progress.
import { Progressbar } from "rizzui";
Default
The default style of Progressbar.
import { Progressbar } from "rizzui";
export default function App() {
return <Progressbar value={75} />;
}
Variants
You can change the style of Progressbar using variant property.
import { Progressbar } from "rizzui";
export default function App() {
return (
<>
<Progressbar variant="flat" value={75} />
<Progressbar variant="solid" value={75} />
</>
);
}
Sizes
You can change the size of Progressbar using size property.
import { Progressbar } from "rizzui";
export default function App() {
return (
<>
<Progressbar value={45} size="sm" />
<Progressbar value={65} />
<Progressbar value={75} size="lg" />
<Progressbar value={85} size="xl" />
</>
);
}
Rounded
You can change the border radius of Progressbar using rounded property.
import { Progressbar } from "rizzui";
export default function App() {
return (
<>
<Progressbar value={45} rounded="sm" />
<Progressbar value={65} />
<Progressbar value={75} rounded="md" />
<Progressbar value={85} rounded="lg" />
<Progressbar value={95} rounded="none" />
</>
);
}
Colors
You can change the color of Progressbar using color property.
import { Progressbar } from "rizzui";
export default function App() {
return (
<>
<Progressbar value={25} />
<Progressbar value={45} color="secondary" />
<Progressbar value={65} color="danger" />
<Progressbar value={75} color="info" />
<Progressbar value={85} color="success" />
<Progressbar value={95} color="warning" />
</>
);
}
With Label
You can set label inside the Progressbar using label property. It will only work when size="xl".
import { Progressbar } from "rizzui";
export default function App() {
return <Progressbar value={75} size="xl" label="75%" />;
}
API Reference
Progressbar Props
Here is the API documentation of the Progressbar component.
Props | Type | Description | Default |
---|---|---|---|
value | number | Percentage of filled bar | __ |
label | string | Pass label to show percentage inside bar. It will only work when size="xl" | "" |
variant | solid flat | The variants of the components are: | "solid" |
size | ProgressbarSize | Size of the compoents are | "md" |
rounded | ProgressbarRounded | The rounded variants are: | "pill" |
color | ProgressbarColor | Pass color variations | "primary" |
barClassName | string | To style bar of the component | __ |
labelClassName | string | To style label | __ |
className | string | To style entire progressbar component | __ |
Progressbar Sizes
type ProgressbarSizes = "sm" | "md" | "lg" | "xl";
Progressbar Rounded
type ProgressbarRounded = "sm" | "md" | "lg" | "pill" | "none";
Progressbar Colors
type ProgressbarColors =
| "primary"
| "secondary"
| "danger"
| "info"
| "success"
| "warning";