Pagination
Search the component library

Pagination

v1.0.0

This component defines the standard visual style for the pagination element.

Usage Guidelines

Pagination provides the user with a natural break from reading or scanning the contents of the dataset, and allows them to re-evaluate whether they wish to continue looking through more data, or navigate away from the page.

Features

  • Defines all state styles (hover, selected, highlighted range, disabled)
  • Provides a compact style for responsive or space limited use cases

Standard pagination

Provide pagination control to browse from page to page. Let the user browse to the previous and next pages by providing links to such actions.

The standard style

Compact pagination

A simple alternative version of pagination style.

The compact style

Redlines

Basic Pagination

Spacing
  • Page number and arrow buttons: min-width of 44px, height of 44px
  • Ellipses: width 32px , height 44px
  • An underline appears 6px below the text
Typography
Normal page style
Selected style
Hover style
Focus
  • Use the browser default focus outline
  • Also use the hover style
Icons
  • chevron-next-sm-18
  • chevron-back-sm-18
  • ellipsis-18
Arrows
  • Forward/Back arrow are inside a 28px diameter concrete circle

Compact Pagination

Spacing
  • Next/Prev buttons are 12px from the current location
Location info
  • Uses UI Text - Basic style
  • Should either say “Page X of Y” or current range: “X – Y of Z”

Changelog

1.0.0

Initial version