Progress Bar

A styled progress bar.

Accessibility

A ProgressBar needs to be associated with a label for accessibility purposes, therefore the component id needs to be set. If a label is not available, please add an aria-label to ensure that the component remains accessible. For more examples, please read aria-progressbar-name

<ProgressBar value={20} aria-label="Completion rate" />

Themes

These are the available themes for this component: Primary (default), Success, Warning, Danger

<div className="flex gap-3 flex-col w-[325px]">
  <ProgressBar value={10} />
  <ProgressBar theme="info" value={20} aria-label="Completion rate" />
  <ProgressBar theme="success" value={30} aria-label="Completion rate" />
  <ProgressBar theme="warning" value={40} aria-label="Completion rate" />
  <ProgressBar theme="danger" value={50} aria-label="Completion rate" />
</div>

Appearance

There two options for the appearance property: solid and outline(default). These are the available outline variations for all the themes.

<div className="flex gap-3 flex-col w-[325px]">
  <ProgressBar appearance="solid" value={10} aria-label="Completion rate" />
  <ProgressBar appearance="info" theme="info" value={20} aria-label="Completion rate" />
  <ProgressBar appearance="solid" theme="success" value={30} aria-label="Completion rate" />
  <ProgressBar appearance="solid" theme="warning" value={40} aria-label="Completion rate" />
  <ProgressBar appearance="solid" theme="danger" value={50} aria-label="Completion rate" />
</div>

API Reference

ProgressBar

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`getValueLabel`	`(value: number, max: number) => string`	-	-
`max`	`number`	`100`	-
`size`	`Partial<Record<Breakpoint, "sm" \| "md">>` \| `"sm"` \| `"md"`	`md`	-
`theme`	`"neutral"` \| `"primary"` \| `"success"` \| `"warning"` \| `"danger"` \| `"info"` \| `Partial<Record<Breakpoint, "neutral" \| "primary" \| "success" \| "warning" \| "danger" \| "info">>`	`primary`	-
`value`	`null` \| `number`	-	-