Components · Actions
Previous / Next
Sequential movement through a multi-step process. Unlike Pagination, which jumps anywhere in a set, Previous/Next moves exactly one step and can name where it is going.
Figma source: Previous/Next ↗Examples
With and without the step name
<button type="button" class="cds-prevnext">
<span aria-hidden="true" class="fa fa-arrow-left"></span> Previous
<span class="cds-prevnext__name">Personnel</span>
</button>
<!-- Disabled at the start of the sequence -->
<button type="button" class="cds-prevnext" disabled>
<span aria-hidden="true" class="fa fa-arrow-left"></span> Previous
</button>Figma properties
| Property | Values | Notes |
|---|---|---|
Step | Next · Previous | Direction. Determines which side the arrow sits on. |
State | Active · Disabled | Disabled at the ends of the sequence. |
Show Page or Step Name | boolean | Whether the destination is named. |
Page or Step Name | text | The heading of the destination step — its h1 or h2. |
Usage
When to use it
- Use in a linear process where order matters — a form broken into sections, a wizard, a review sequence.
- Show the destination name where the steps have meaningful titles; it turns a guess into a decision.
- Pair with a Form Section List so the user can see the whole sequence as well as move through it.
When not to use it
- Do not use for paged data — that is Pagination.
- Do not hide the control at the ends of the sequence; disable it, so the boundary is visible and the layout does not shift.
- Do not make Next the only way forward if the user could reasonably skip ahead.
Accessibility
- The arrow is decorative —
aria-hidden="true". The words carry the meaning. - When the step name is shown it forms part of the accessible name, giving “Next, Budget justification”. This is better than “Next” alone in a screen-reader link list, so prefer showing it.
- After moving to a new step, move focus to the new step’s heading so the change is announced rather than silent.
- Disabled ends use the real
disabledattribute so the control is removed from the tab order.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--primary-brand-color | Label and arrow | #0076b6 |
--navigation-disabled | Disabled label | --disabled-text → #888c8c |
--container-text | Step name | #111111 |