Progress

bo-progress displays a determinate value as a percentage of max. It is not an indeterminate loading spinner: provide a value that represents measurable progress.

Basic Usage

The default max is 100. Add label for visible context and showValue when the percentage is useful to the user.

Uploading65%

<bo-progress :value="65" label="Uploading" show-value />

Variants

The indicator supports all five BoProgressVariant values.

<bo-progress :value="25" variant="primary" />
<bo-progress :value="40" variant="secondary" />
<bo-progress :value="55" variant="destructive" />
<bo-progress :value="70" variant="warning" />
<bo-progress :value="85" variant="success" />

Sizes

Use sm, default, or lg to choose the track height.

Small

Default

Large

<div class="grid w-full max-w-xl gap-4">
  <bo-progress :value="45" size="sm" label="Small" />
  <bo-progress :value="60" size="default" label="Default" />
  <bo-progress :value="75" size="lg" label="Large" />
</div>

Max and Clamping

The percentage is calculated as value / max * 100 and rounded to the nearest integer. Values below zero and above max are visually clamped to 0% and 100%; the ARIA value still receives the original value and max values.

Processing records50%

Clamped to zero

Clamped to one hundred

<bo-progress :value="75" :max="150" label="Processing records" show-value />
<bo-progress :value="-10" label="Clamped to zero" />
<bo-progress :value="120" label="Clamped to one hundred" />

Accessibility

The track uses role="progressbar", aria-valuenow, aria-valuemin="0", and aria-valuemax. The visible label is used as the accessible label unless ariaLabel overrides it. If neither is provided, supply ariaLabel in production.

Usage Guidance

• Update value as work progresses and keep max stable for the operation.
• Use showValue when users benefit from an exact percentage, not just a visual indication.
• Use variant="destructive" for failed or dangerous progress states only when the surrounding UI explains the meaning.
• Use a loading spinner for work with no meaningful percentage.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	The progress root id.
dataTestId	string	Autogenerated	The test id attribute.
value	number	0	Current progress value.
max	number	100	Maximum progress value.
variant	BoProgressVariant	primary	Indicator color: primary, secondary, destructive, warning, or success.
size	BoProgressSize	default	Track size: sm, default, or lg.
label	string	-	Visible progress label and default accessible name.
showValue	boolean	false	Displays the rounded calculated percentage.
role	HTMLAttributes['role']	progressbar	ARIA role for the track.
ariaLabel	HTMLAttributes['aria-label']	-	Accessible label override.