Stepper
Updated 2026-05-14
Content guidelines
Section titled “Content guidelines”A stepper guides users through a multi-step process in a defined sequence. Each step represents a discrete task that must be completed before moving to the next. Steppers are used in onboarding flows, connection setup, and wizards.
When to use
Section titled “When to use”- When a process has three or more distinct steps that must be completed in order.
- When it is important for users to understand their progress through a workflow.
- Do not use a stepper for simple two-step confirmations - use a modal instead.
Step titles
Section titled “Step titles”- Use short imperative verb phrases. For example,
Choose a data source,Configure settings,Review and create. - Do not include the step number in the title text - the stepper component displays that.
- Keep titles parallel in structure across all steps.
Navigation buttons
Section titled “Navigation buttons”- Use Back for the previous step button. Do not use Previous.
- Use Next for all intermediate steps.
- Use Create (or the appropriate object-specific verb) for the final step - not Finish, Done, or Submit.
- See the Buttons section for full stepper button terminology.
Do / Don’t
Section titled “Do / Don’t”✓ Do
Choose a data source
✗ Don't
Step 1: Data source selection
✓ Do
Create (final step)
✗ Don't
Finish / Done / Submit
✓ Do
Back
✗ Don't
Previous
Wizards are guided multi-step flows that walk users through complex setup or configuration tasks. They combine steppers, forms, and confirmation screens into a linear sequence with clear progression.
When to use
Section titled “When to use”- For complex setup tasks that cannot be completed on a single form - for example, creating a connection, configuring a pipeline, or onboarding a new dataset.
- When the steps have a natural sequence and later steps depend on earlier choices.
- Do not use a wizard for simple tasks that can be completed in a single form or modal.
Step titles
Section titled “Step titles”- Short imperative verb phrases. For example,
Choose a connector,Set connection details,Test and save. - Parallel structure across all steps.
- Do not repeat the wizard title in each step title.
In-step content
Section titled “In-step content”- Use a short paragraph at the top of each step to explain what the user is about to do and why.
- Keep explanatory text to two sentences maximum.
- Use inline help (popovers or helper text) for field-level guidance rather than long step-level explanations.
Confirmation and summary step
Section titled “Confirmation and summary step”- The final step before submission should present a summary of the user’s choices.
- Label the summary step
RevieworReview and create. - Use the same attribute labels as the preceding form fields - do not rephrase.
- Show an edit link next to each section so the user can go back and change specific settings.
Navigation buttons
Section titled “Navigation buttons”Follow the stepper button terminology guidelines. Use Back, Next, and the appropriate object-specific verb for the final step (for example, Create connection).
Do / Don’t
Section titled “Do / Don’t”✓ Do
Choose a connector
✗ Don't
Connector selection step
✓ Do
Review and create
✗ Don't
Confirmation
✓ Do
Create connection
✗ Don't
Finish / Submit / Done
✓ Do
Connect to your data source. This will allow the platform to read and write data on your behalf.
✗ Don't
Please complete all required fields in this step before proceeding.