Progress Bar

Name: Boreal UI
Author: Davin Chiupka

The Progress Bar component visually represents the completion state of a task or process.

Usage & Examples

Default

default.tsx


  <Progressbar value={65} />

Visual variants

Themes

primary

secondary

tertiary

quaternary

States

success

warning

error

info

Sizes

small

medium

large

Variants

solid

outline

glass

Rounding

none

medium

large

Shadows

none

light

strong

visual-variants.tsx

// Themes

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

// States

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

// Sizes

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

// Variants

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

// Rounding

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

// Shadows

  <Progressbar value={65} />

  <Progressbar value={65} />

  <Progressbar value={65} />

Props API

Progress Bar props API
				Default	Description
`animated`	`boolean`	No	props	`true`	If true, applies an animated effect to the progress bar.
`aria-describedby`	`string`	No	aria	`—`	ID of the element that describes the progress bar. Useful for extra context or status messaging.
`aria-label`	`string`	No	aria	`"Progress"`	Accessible label for the progress bar. Use this when no visible label exists.
`aria-labelledby`	`string`	No	aria	`—`	ID of the element that labels the progress bar. Prefer this when there is a visible label in the UI.
`aria-valuetext`	`string`	No	aria	`—`	Custom accessible text for screen readers. Example: "Uploading 3 of 5 files"
`className`	`string`	No	styling	`—`	Optional additional class name(s) for custom styling.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`description`	`ReactNode`	No	props	`—`	Optional description content rendered for assistive technology.
`descriptionId`	`string`	No	props	`—`	Optional id applied to the description container. Useful when connecting the description with aria-describedby.
`indeterminate`	`boolean`	No	props	`false`	If true, the progress bar shows an indeterminate animation. When true, the value prop is ignored.
`label`	`ReactNode`	No	props	`—`	Optional label describing what the progress represents. Example: "Uploading files", "Build progress"
`labelId`	`string`	No	props	`—`	Optional id applied to the visible label container. Useful when connecting the label with aria-labelledby.