Skip to Main Content

Pelican Design System icon Pelican Design System Previous & Next Page Buttons

Previous & Next Page Buttons

Previous & Next Page buttons allow users to move through a sequential process.

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 to btn-primary.
  • Consider the guidance in Buttons.

Usage

See the Pen Buttons Prev Next by LA Gov Design Team (@lagovdesignteam) on CodePen.

Resources

Page top