Progress Bar

Visually indicates how much progress a user or the system has made toward a goal. Four intents let you communicate sentiment — from neutral onboarding steps to critical capacity warnings. Always pair with nearby context so the bar is never the only signal.

Core
3 of 5 steps complete
Positive
£8,000 of £10,000
Warning
5 of 12 deliverables met
Negative
94 of 100 spots taken

preview

65%

props

PropTypeDefaultDescription
valuenumberrequiredFill percentage, 0–100. Values outside this range are clamped.
intent'core' | 'positive' | 'warning' | 'negative''core'Controls the colour of the track and fill. Match the intent to the meaning of the data.
labelstring—Optional text displayed to the right of the bar. Omit to hide the label slot entirely.
aria-labelstring—Accessible name for the progress bar. Provide this or aria-labelledby when the bar has no visible label.
aria-labelledbystring—ID of the element that labels this progress bar.

usage

A progress bar communicates quantity and direction, but not meaning on its own. Always place it alongside a title, label, or supporting text so users understand what the bar represents. Use the intent that matches the real state of the data — not the one that looks best.

When to use

  • In a card or table row to show progress toward a goal alongside a label
  • To indicate onboarding or setup completion (core intent)
  • To communicate fundraising targets, capacity levels, or delivery rates
  • When the value can change over time and the visual update helps the user track progress

Do not use

  • As the only signal — always provide a label, title, or nearby text to explain what is being tracked
  • With an intent that contradicts the data — a nearly full capacity bar should be negative, not positive
  • For binary states — use a badge or status indicator instead
Fundraising target
£7,800 of £10,000
DoPair with a descriptive label that gives the bar meaning
Don’tUse a bar alone with no label or context, or a positive intent when capacity is nearly full

intents

Choose the intent based on what the value means to the user, not the value itself. A 90% fill on a fundraising target is positive; the same fill on a capacity limit is negative.

3 of 5 steps complete
CoreUse for onboarding, setup tasks, or any progress that doesn't need to convey sentiment. Can transition to warning or negative if the situation changes.
£8,000 of £10,000
PositiveUse when progress is healthy and encouraging — a fundraising target on track, strong RSVP rates, or deliverables being met ahead of schedule.
5 of 12 deliverables met
WarningUse when progress needs attention — sponsor deliverables falling short, registrations behind pace, or a deadline approaching with work remaining.
94 of 100 spots taken
NegativeUse when a limit is being approached or exceeded — oversubscribed capacity, a budget nearly depleted, or a threshold about to be breached.

in context

Progress bars work well inside cards and table rows. Use them alongside a clear title or row label so the bar always has supporting context.

Autumn Classic 2025
Registrations
72 of 100
Sponsorship
45%
Capacity
91 of 100
Setup
3 of 5 steps
In a cardStack multiple bars in an event overview card with a label above each bar.
Summer Open
80%
Charity Cup
42%
Members Classic
96%
Junior Tour
55%
In a table rowPair with a row label to give each bar immediate context without needing a header.