Stepper

Displays a linear process or workflow in a step-by-step manner, allowing the user to easily understand where they are in the process and what steps remain. AKA progress indicator.

Types

 

Extended

Stepper-Type-Extended
  • Desktop:
    • Default
    • Found in bottom sheets
  • Native app phone: đźš« NO
  • Interactive: âś… YES

 

Condensed

Stepper-Type-Condensed
  • Native app phone: Default
  • Desktop:
    • Rare
    • Found in experiences marketing or onboarding experiences
  • Interactive: đźš« NO

 

Number of steps

  • Minimum: 3 steps
  • Maximum: 5 steps
Stepper-Do-Number-of-Steps
Stepper-DoNot-Number-of-Steps

 

When to hide the step title

Native app phone

Hide the built-in title when the step title is already in the content.

Exposed: Step name is in the component

Exposed: Step name is in the component

Hidden: Step name is in the content

Hidden: Step name is in the content

 

Desktop

Always hide the built-in step title in desktop because the title is always in the page content.

Stepper-Hide-Name-Hidden-Desktop

 

Copy Guidelines

Step titles

  • 1-3 words preferred
  • Avoid wrapping
  • Sentence case
  • Create titles that don’t need punctuation (e.g. question marks, periods, commas)
  • Strong entity names or things. Will often be a combo of adjective + noun.
  • If the page they refer to has a title, the title of the step should be the same. If the page title is too long, shorten it but try to keep the same key words.

 

Examples

Condensed

Stepper-Condensed-Sign-up
Stepper-Condensed-Example-Add-Team-Member
Stepper-Condensed-Example-POS

 

Extended

Stepper-Extended-Example-Tip-source
Stepper-Extended-Example-Run-Payroll

 

Resources

(internal only)

Figma