Navigate between muitple pages of records.


The Pagination component shows a series of related content split across multiple pages. It allows an end user to navigate between these pages of records.

The Pagination component.


The Pagination component is best used for large lists and tables.


Anatomy of the Pagination component.Page Action1Prev/Next2
  1. Page Action. This allows the user to quickly jump to a specific page of records.
  2. Prev/Next. These buttons move the page number by +/-1.

Sizing & Spacing

The Pagination component is of fixed size.

States (if applicable)

Page Action StatesPrev/Next Button StatesText Pagination component states.

Multiple sub-components of the Pagination component have many different states. The Page Action buttons have default, hover, and active states, whereas the Prev/Next buttons have default and hover.

Hierarchy & Placement

The Pagination component should be placed above and below a table or list and aligned to the right-hand side. Do not nest the Pagination component. If another level is required, direct the user to a new page.