Pagination
Search the component library

Pagination

v1.0.0-beta.1
Download UI Kit v1.9.0

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

Download UI Kit v1.9.0

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)

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: width 44px(min), height 44px
  • Page number padding: 18px to left/right
  • Underline (selective state): 6px
  • Ellipses: width 32px , height 44px
Page Number style
  • Normal: Basic UI Text: 14px/18pxMedium Gray
  • Selected: Bold UI Text 14/18px Charcoal, border 2px
  • Selected border below: Charcoal, border 2px
  • Hover: Basic UI Text: 14px/18pxMedium Gray, border 2px
  • Hover border below: Medium Gray, border 2px
  • Focus: Basic UI Text: 14px/18pxMedium Gray, border 2px
  • Focus border below: Basic UI Text: 14px/18pxMedium Gray, border 2px

Compact Pagination

Spacing
  • Page number: width 44(min), height 44px
  • Page number padding: 12px left/right
Page Number style
Basic UI Text: 14px/18pxMedium Gray

Changelog

1.0.0-beta.1

Initial version