Previous & Next Page Buttons
Previous & Next Page buttons allow users to move through a sequential process.
On this page:
Best Practices
- Place at the bottom, but above the footer, of each page in the process.
- Be sure to customize the value in the
aria-label="..."
for each project. - Buttons should be side by side at small sizes, when the button labels are short.
- Buttons can be centered at small sizes when the buttons labels are too long for side by side arrangement.
- When button labels are long enough to require centering, ensure that Previous button is atop the Next button.
- To assign equal emphasis to Previous and Next, change
btn-outline-ui
on the Previous button tobtn-primary
. - Consider the guidance in Buttons.
Usage
See the Pen Buttons Prev Next by LA Gov Design Team (@lagovdesignteam) on CodePen.