Search the component library



This component defines the standard visual style for pagination. Use pagination to provide users with a natural break from reading or scanning content. This allows them to re-evaluate whether they want to continue looking through more content, or navigate away from the page.


There are two types of pagination:

  • Standard provides pagination control to browse from page to page. Lets users browse to the previous and next pages by providing links.

Note: Standard pagination reacts to different viewports. More pages will be shown on larger screens and fewer pages on smaller screens.

  • Compact provides a simple alternative version of pagination style. Ideal for small mobile screens.

Standard pagination

Standard pagination examples: max pages and 3 variations of fast forward.

Compact pagination

Compact pagination examples: organized by group or page.


Standard 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"

Pagination buttons

Arrow buttonsForward/Back arrow are inside a 28px diameter circle, including border.
Normal styleIcon, Medium Gray
Background, White
1px border, concrete
Hover styleIcon, Medium Gray
Background, Moonlight
1px border, concrete
Disabled styleIcon, concrete
Background, [White
1px border, Moonlight
FocusUse the browser default focus outline



  • UPDATED: Basic pagination to become responsive and adjust to screen width
  • FIXED: Redline and basic pagination visuals to match built SDK
  • FIXED: Hover cursor to display as a hand icon instead of an arrow
  • UPDATE: Redlines to include pagination buttons
  • UPDATE: Redlines to include more detail
  • ADDED: Sketch file download


Initial version