Search the component library



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.


  • 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


Basic Pagination

SpacingPage number and arrow buttons: min-width of 44px, height of 44px
Ellipses: width 32px , height 44px
An underline appears 6px below the text
TypographyDefault text is UI Text - Basic
Normal page styleUI Text - Basic
Medium Gray
Selected styleUI Text - Bold
2px underline
Text and underline are Charcoal
Hover styleAdd a Medium Gray, 2px underline to the normal style
FocusUse the browser default focus outline
Also use the hover style
ArrowsForward/Back arrow are inside a 28px diameter concrete circle

Compact Pagination

SpacingNext/Prev buttons are 12px from the current location
Location infoUses UI Text - Basic style
Should either say "Page X of Y" or current range: "X – Y of Z"



Initial version