CircularProgress

Name: Boreal UI
Author: Davin Chiupka

The CircularProgress component displays a circular rating or progress indicator.

Usage & Examples

Default

default.tsx

<CircularProgress value={75} label="Progress Score" />

Visual variants

Themes

primary

secondary

tertiary

quaternary

States

success

warning

error

info

Sizes

small

medium

large

Variants

solid

outline

glass

Shadows

none

light

strong

visual-variants.tsx

// Themes
<CircularProgress theme="primary" value={75} label="Progress Score" />
<CircularProgress theme="secondary" value={75} label="Progress Score" />
<CircularProgress theme="tertiary" value={75} label="Progress Score" />
<CircularProgress theme="quaternary" value={75} label="Progress Score" />

// States
<CircularProgress state="success" value={75} label="Progress Score" />
<CircularProgress state="warning" value={75} label="Progress Score" />
<CircularProgress state="error" value={75} label="Progress Score" />
<CircularProgress state="info" value={75} label="Progress Score" />

// Sizes
<CircularProgress size="xs" value={75} label="Progress Score" />
<CircularProgress size="small" value={75} label="Progress Score" />
<CircularProgress size="medium" value={75} label="Progress Score" />
<CircularProgress size="large" value={75} label="Progress Score" />

// Variants
<CircularProgress variant="solid" value={75} label="Progress Score" />
<CircularProgress variant="outline" value={75} label="Progress Score" />
<CircularProgress variant="glass" value={75} label="Progress Score" />

// Shadows
<CircularProgress shadow="none" value={75} label="Progress Score" />
<CircularProgress shadow="light" value={75} label="Progress Score" />
<CircularProgress shadow="strong" value={75} label="Progress Score" />

Props API

CircularProgress props API
				Default	Description
`announceInnerValue`	`boolean`	No	props	`false`	Whether the visible value text inside the circle should be announced by assistive technologies. Default: false, because the progressbar itself already exposes value via ARIA.
`aria-describedby`	`string`	No	aria	`—`	ID reference to one or more elements that describe the progressbar.
`aria-label`	`string`	No	aria	`—`	Accessible label for the progressbar. Takes priority over `label`.
`aria-labelledby`	`string`	No	aria	`—`	ID reference to one or more elements that label the progressbar. Takes priority over `aria-label` and `label`.
`ariaValueText`	`string`	No	aria	`—`	Custom accessible value text for assistive technologies. Example: "75 percent complete"
`className`	`string`	No	styling	`—`	Optional class name for custom styling.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`decorative`	`boolean`	No	props	`false`	Marks the component as decorative. When true, the progressbar will be hidden from assistive technology.
`label`	`string`	No	props	`"Progress"`	Visible label fallback and default accessible name. Used only when no aria-label or aria-labelledby is provided.
`max`	`number`	No	props	`100`	Maximum value for the range (default: 100).
`min`	`number`	No	props	`0`	Minimum value for the range (default: 0).
`shadow`	`ShadowType`	No	styling	`—`	Optional shadow style for the component ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').