Wildeye Design System
CtrlK
Home page

Progress tracker

Shows where people are in a multi-step flow, with finished steps ticked and the current one marked.

Refined portVue source: WildProgressTracker.vueReact component: WProgressTracker, ProgressStep, ProgressTrackerSize

Try it

Step through with Next and Back. Turn on Clickable, then click a finished step to go back to it.

  1. Site, completedName and location
  2. LoggerSerial number
  3. Inputs, not startedWhat it measures
  4. Review, not startedCheck and save
Orientation
Size
Descriptions
Numbers
Clickable
<WildProgressTracker
  :steps="steps"
  :current-step="1"
  aria-label="New site"
/>

When to use

  • Use it above a flow of three to six steps, such as setting up a site.
  • Use it when people need to know how much is left before they commit.
  • Make finished steps clickable when going back to edit is safe.
Don’t use it

Orientation

  1. Site, completed
  2. Logger, completed
  3. Inputs
  4. Review, not started
horizontal
  1. Site, completedName and location
  2. Logger, completedSerial number
  3. InputsWhat it measures
  4. Review, not startedCheck and save
vertical
Use vertical in a side panel, or when descriptions run past a few words.

Sizes

Circles of 24, 32 and 40px. The default is md.

  1. Site, completed
  2. Logger
  3. Inputs, not started
  4. Review, not started
sm
  1. Site, completed
  2. Logger
  3. Inputs, not started
  4. Review, not started
md
  1. Site, completed
  2. Logger
  3. Inputs, not started
  4. Review, not started
lg

States

  1. Site
  2. Logger, not started
  3. Inputs, not started
  4. Review, not started
first step
  1. Site, completed
  2. Logger, completed
  3. Inputs
  4. Review, not started
in progress
  1. Site, completed
  2. Logger, completed
  3. Inputs, completed
  4. Review, completed
all done
  1. Site, completed
  2. Logger
  3. Inputs, not started
  4. Review, not started
numbers off
Set currentStep to the step count once it’s saved, so every step shows a tick. With numbers off, the current circle holds a dot.

Content

  • Name each step with a noun of one or two words: Site, Logger, Review.
  • Keep descriptions to a few words saying what the step asks for.
  • End on the step where people check and save.

Accessibility

Give it an aria-label that names the flow. Screen readers hear each step as current, completed or not started.

KeyWhat it does
TabMoves to the next clickable finished step.
Enter / SpaceGoes back to that step, and focus moves with it.

Props

PropTypeDefaultDescription
steps(string | { label, description? })[]—The steps, in order.
currentStepnumber00-based. Equal to the step count when all are done.
showNumbersbooleantrueNumbers in the circles of unfinished steps.
size'sm' | 'md' | 'lg''md'Circle of 24, 32 or 40px.
orientation'horizontal' | 'vertical''horizontal'Row across the top, or a column.
clickablebooleanfalseFinished steps become buttons.
@step-click(index: number) => void—Emitted when a finished step is chosen.
aria-labelstring'Progress'Names the flow for screen readers.

Tokens

TokenValueWhere it lands
--global-blue-900#00AEEFFinished and current circles, lines, current halo.
--global-neutral-grey-300#F1F1F1Upcoming circle fill.
--global-neutral-grey-600#DCDCDEUpcoming lines.
--global-neutral-grey-1100#2D2B32Finished step label, upcoming number.
--global-neutral-grey-1000#4F4D55Upcoming labels, descriptions.
--global-blue-1000#1877F2Current step label, focus ring.
--global-base-white#FFFFFFNumber, tick and dot on cyan; gap inside the focus ring.