---
sidebar_position: 3
---

import { Progressbar } from "rizzui";
import Paper from "@site/src/components/paper";

# Progressbar

A basic widget for showing the work progress.

```tsx
import { Progressbar } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Progressbar**.

<Paper>
  <Progressbar value={75} />
</Paper>

```tsx
import { Progressbar } from "rizzui";

export default function App() {
  return <Progressbar value={75} />;
}
```

<div className="mb-16" />

## Variants

You can change the style of **Progressbar** using **variant** property.

<Paper className="gap-6">
  <Progressbar
    variant="flat"
    value={50}
  />
  <Progressbar
    variant="solid"
    value={90}
  />
</Paper>

```tsx
import { Progressbar } from "rizzui";

export default function App() {
  return (
    <>
      <Progressbar
        variant="flat"
        value={75}
      />
      <Progressbar
        variant="solid"
        value={75}
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of **Progressbar** using [**size**](#progressbar-sizes) property.

<Paper className="gap-6">
  <Progressbar
    value={45}
    size="sm"
  />
  <Progressbar value={65} />
  <Progressbar
    value={75}
    size="lg"
  />
  <Progressbar
    value={85}
    size="xl"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **Progressbar** using [**rounded**](#progressbar-rounded) property.

<Paper className="gap-6">
  <Progressbar
    value={45}
    rounded="sm"
  />
  <Progressbar value={65} />
  <Progressbar
    value={75}
    rounded="md"
  />
  <Progressbar
    value={85}
    rounded="lg"
  />
  <Progressbar
    value={95}
    rounded="none"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of **Progressbar** using [**color**](#progressbar-colors) property.

<Paper className="gap-6">
  <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"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## With Label and Label Position

You can set label of **Progressbar** using **label** property. And set position of label using [**labelPosition**](#progressbar-label-position) property.

Note: **labelPosition='insideBar'** property will only work when **size="xl"**.

<Paper>
  <div className="grid grid-cols-1 gap-10 w-full">
    <Progressbar
      value={75}
      label="75%"
    />
    <Progressbar
      value={75}
      label="75%"
      labelPosition="inlineLeft"
    />
    <Progressbar
      value={75}
      label="75%"
      size="xl"
      labelPosition="insideBar"
    />
  </div>
</Paper>

```tsx
import { Progressbar } from "rizzui";

export default function App() {
  return (
    <div className="grid grid-cols-1 gap-10 w-full">
      <Progressbar
        value={75}
        label="75%"
      />
      <Progressbar
        value={75}
        label="75%"
        labelPosition="inlineLeft"
      />
      <Progressbar
        value={75}
        label="75%"
        size="xl"
        labelPosition="insideBar"
      />
    </div>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Progressbar Props

Here is the API documentation of the Progressbar component.

<div className="overflow-x-auto">

|     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](#progressbar-sizes)          |                           Size of the components are                           |     `"md"`      |
|    rounded     |       [ProgressbarRounded](#progressbar-rounded)        |                           The rounded variants are:                            |    `"pill"`     |
|     color      |         [ProgressbarColor](#progressbar-colors)         |                             Pass color variations                              |   `"primary"`   |
| labelPosition  | [ProgressbarLabelPosition](#progressbar-label-position) |                Sets the label position of progressbar component                | `"inlineRight"` |
|   className    |                        `string`                         |                       To style the root of the component                       |      \_\_       |
|  barClassName  |                        `string`                         |                         To style bar of the component                          |      \_\_       |
| trackClassName |                        `string`                         |                  To style progressbar track of the component                   |      \_\_       |
| labelClassName |                        `string`                         |                                 To style label                                 |      \_\_       |

</div>

<div className="mb-10" />

### Progressbar Sizes

```ts
type ProgressbarSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Progressbar Rounded

```ts
type ProgressbarRounded = "sm" | "md" | "lg" | "pill" | "none";
```

<div className="mb-10" />

### Progressbar Colors

```ts
type ProgressbarColors = "primary" | "secondary" | "danger" | "info" | "success" | "warning";
```

<div className="mb-10" />

### Progressbar Label Position

```ts
type ProgressbarLabelPosition = "inlineLeft" | "inlineRight" | "insideBar";
```
