Steps
A row of numbered steps that shows where a person is in a flow of a few steps: done, current and still to come.
Master
Switch size. Next and Back walk the steps; click a done step to go back. Fill spreads the steps across the width.
- Map Columns, current step
- Billing IDs, not started
- Usage IDs, not started
- Activate, not started
Usage
Use Steps above a flow that is split into a few steps, like a setup wizard or an import: Setup, Map Columns, Billing IDs. It is one component: pass steps as labels and current as the step number, starting at 1. Steps before current are done (green with a check), current is brand with its number, later steps are gray. A current past the last step shows every step done. onStepClick makes done steps buttons, to go back and change them. fill spreads the steps across the full width. The Steps only shows progress; the page shows the step's content and its Back and Next buttons. See contracts/steps.json for the full contract.
Do's
- A flow of two to seven steps done in order, like a setup wizard or an import.
- Showing which steps are done and which are left.
Don'ts
- Do not use it for page sections the person can visit in any order. Use Tabs.
- Do not use it for a single amount done. Use Meter.
- Do not put the Back and Next buttons inside it; they belong to the page.
- Do not use long labels; keep each to one or two words.
- Do not use raw hex.
<Steps
current={2}
size="md"
/>