Use the steps component to display a future or potential multi step process in a scannable format.
The last step shows a check icon by default.
Usage
Usage guidance 1
Usage guidance 2
Writing steps
Ensure customers understand what’s coming next by presenting future steps in a clear, concise, and actionable way. Each step should reduce uncertainty, build trust, and guide users smoothly through the process without overwhelming them.
- Be clear & concise – Use simple language to describe each step. Customers should understand what will happen next at a glance.
- Use actionable language – Frame steps in a way that reassures the user, e.g. “We’ll send your confirmation email” instead of “Email sent.”
- Maintain a logical flow – Arrange steps sequentially so the customer knows what to expect.
- Set the right expectations – Be transparent about timelines or required actions, e.g. “Your solar set-up will be reviewed within 21 days.”
- Use vague or generic descriptions – Avoid unclear language like “Processing your request” without explaining what’s actually happening.
- Overload with too much text – Keep step descriptions short. If more details are needed, provide a way to expand.
- Make promises you can’t keep – Don’t specify exact times if they can vary (e.g. instead of "You’ll be approved in 1 hour," say, "Approval usually takes 1–2 hours").
- Use jargon or internal terms – Customers may not understand internal product language; keep it customer-friendly.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
v5+ |
|
App (@ovotech/element-native) |
❌ |
Related
External links