Progress
Progress shows how far a task has come: a bar for one measure, or numbered steps for a guided flow.
Bar and steps
Setup progress3 of 8 steps
Show code
<KbProgress label="Setup progress" value={3} max={8} valueText="3 of 8 steps" />SetupStep 2 of 3
- Connect your website, done
- Add the widget, current step
- Invite your team, not started
Show code
<KbProgress label="Setup" steps={steps} />When to use
- Use it when a task has a known end: setup, import, onboarding.
- Use a meter for a reading that is not getting done, such as a score.
- Always give the readout in words (3 of 8 steps), not only a percentage.
Import40 of 100 contacts
Progress40%
Import
import { KbProgress } from "@/components/ui/KbProgress";
<KbProgress label="Setup progress" value={3} max={8} valueText="3 of 8 steps" />
<KbProgress label="Setup" steps={[{ key: "a", label: "Connect your website", state: "done" }]} />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | Names the progress. |
value, max, valueText | number, number, string | None | Bar mode. |
steps | { key, label, state }[] | None | Step mode: done, current or todo. |
Keyboard and screen readers
- The bar is role=progressbar with name, range and text value.
- Steps are an ordered list; the current step has aria-current=step and each step says its state in hidden text.
- Done and current carry a mark and weight, not colour alone.