Progress Stepper
Progress steppers show discrete progress through a process, such as numbers 1–4. They show how much progress is complete and how much remains, divided into equal steps.
Also known as:
Progress barProgress trackerProgress indicator
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- Progress steppers may be vertical or horizontal.
- Progress steppers may be gated or ungated.
- A step may show validation feedback.
- Aim for 3–4 steps.
Visuals
UI Kit
Options
- Gated or ungated:
- Gated: In a gated progress stepper, later steps depend on completion of earlier steps. The user must navigate through them in order, typically through adjacent buttons in a Workflow.
- Ungated: In an ungated progress stepper, steps can be completed in any order. The user can navigate to any step directly by the step's link.
- Orientation: Horizontal or Vertical
- Linked or unlinked:
- Steps may be linked and receive keyboard focus or unlinked and not receive focus.
- Validation feedback:
- A step may indicate an error in a negative mood or a warning in a cautionary mood.
To keep in mind
Give people feedback about progress through a process and keep them on track. Use progress steppers to break a larger goal into manageable steps.
- Anatomy:
- Progress track: This line links the steps together in a gated progress stepper.
- Current step: This shows the step that the user is on.
- Upcoming step: This shows a step beyond the user, closer to completion.
- Completed step: This shows a step the user has already completed, closer to the beginning.
- Disabled: A grayed-out label indicates a step that users can not revisit.
- Step label: This describes the purpose of the step.
- Step indicator: The circle or dot icon that indicates the step.
- Responsive behavior:
- On small screens, consider hiding step labels and showing only step indicators.
- Use 2–6 steps:
- Aim for 3–4 steps.
- If a Workflow needs more than 6 steps, consider how you might simplify it or break it up into multiple tasks.
Copy guidelines
Use step labels to clearly describe the purpose of the step. Set expectations about what's available in that step.
Keep step labels concise
Use only 1 word where possible.
Do:
- Settings
- Questions
- Employees
Don't:
- Configure your settings
- Ask questions
- Add employees
Consistently use nouns or verbs through all steps
Avoid mixing nouns and verbs in step labels.
Do:
- Settings
- Questions
- Employees
Don't:
- Configure
- Questions
- Add
Step labels use the same terminology as the page they link to
For example, don’t use ‘Export’ in the page title of a Workflow and have a step label of ‘Download’. You may use a longer version of the same terminology in the linked page title. For example, the step label may be “Import” in a workflow footer while the page’s title may be “Import employee data” in the workflow header.
When to use and when not to use
When to use
- Use progress steppers to break a larger goal into manageable steps when it would otherwise be overwhelming.
- Use progress steppers to show tasks completed.
When not to use
- For continuous values, use a progress bar instead.
- For an interactive element that lets people provide input increase numbers in equal steps, use a input stepper, such as a Text Field with number input and Buttons to increase and decrease values.
See also
External links
Here are some examples of other existing design systems: