Progress Step

A progress step component shows the user's advancement through a multi-step process.

Base Components

Overview

A progress step component visually indicates the user's advancement through a multi-step process, such as a form wizard or checkout flow.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D212-57577%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use progress steps for processes that involve multiple stages, helping users understand their progress and what steps remain.

How should you use them?

  • Clearly label each step and indicate its status (completed, current, upcoming).
  • Provide visual feedback for completed steps.
  • Ensure the progress step component is easy to follow.
  • Make the component responsive and adaptable to different screen sizes.
  • Ensure the progress step component is accessible, with proper ARIA roles and keyboard navigation.
Previous

No previous post
Up next

No next post