Feedback

Progress

How far along something is. Leave value out when you can't tell.

import { Progress } from "@flinbu/seed";

Determinate, custom text and indeterminate

Uploading tokens40%

Storage9.2 of 10 GB

Syncing with Figma

import { Button, Progress } from "@flinbu/seed";

const [v, setV] = React.useState(40);

<div className="flex w-full max-w-sm flex-col gap-base">
  <Progress value={v} label="Uploading tokens" showValue />
  <Progress value={9.2} max={10} label="Storage" showValue valueText="9.2 of 10 GB" variant="warning" />
  <Progress label="Syncing with Figma" size="sm" />
  <Button size="sm" variant="secondary" onClick={() => setV((x) => (x >= 100 ? 0 : x + 20))}>Add 20%</Button>
</div>

Use it for

Uploads, imports, usage against a limit.

Props

Prop	Type	Default	Description
`value`	`number \| null`	`none`	Omit for an indeterminate bar.
`max`	`number`	`100`	Top of the scale.
`label`	`ReactNode`	`none`	Names the bar.
`showValue`	`boolean`	`none`	Shows the percentage or valueText.
`valueText`	`string`	`none`	Replaces the percentage, e.g. 9.2 of 10 GB.
`variant`	`'accent' \| 'success' \| 'warning' \| 'error'`	`'accent'`	Bar color.
`size`	`'sm' \| 'md'`	`'md'`	4 or 8 px tall.

Accessibility

Built on Radix Progress: role progressbar with aria-valuenow and a readable valuetext.
The label names the bar.