Pagination
Search the component library

Pagination

v1.1.0

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.

Types

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.

Redlines

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
Iconschevron-next-sm-18
chevron-back-sm-18
ellipsis-18
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

Iconschevron-next-sm-18
chevron-back-sm-18
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

Changelog

1.1.0

  • 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

1.0.0

Initial version