Skip to main content

Pagination

Pagination is a navigational element that divides content into pages for improved user experience with large amounts of data.

Dos and Don'ts

Do
  • Use it to enable users to focus on a smaller section of content at once.
  • Use it for separating large amounts of content.
  • Use it to clarify that more content is available to explore.
Don't
  • Don't use it when there's only a small amount of content which fits in one single page.

Anatomy

Annotated diagram of a pagination component showing its main parts: pagination control, selected page/dropdown control, and page count.
  1. Pagination control: Icon Button which allows the user to show the information in the previous page. Will look disabled if there is no previous page.
  2. Selected page / Dropdown control: Indicates both which page is currently being viewed and allows the user to skip to any page via the dropdown control.
  3. Page count: Indicates how many pages there are in total.

Variants

A pagination component showing the dropdown variant.

Behaviours

A minimum and maximum value must always be defined. Once the value reaches either threshold, the correlating Icon Button is disabled.

Pagination component showing the dropdown at the start of a range, with the previous page button disabled.
Pagination component showing the dropdown at the start of a range, with the previous page button disabled.
Pagination component showing the dropdown in the middle of a range, with both pagination controls enabled.
Pagination component showing the dropdown in the middle of a range, with both pagination controls enabled.
Pagination component showing the dropdown at the end of a range, with the next page button disabled.
Pagination component showing the dropdown at the end of a range, with the next page button disabled.

Interactions

The Pagination's Icon Buttons and controls are used to paginate the user across the pages. Disabled pagination controls aren't interactive.

Pagination component illustrating interactive and disabled states of the pagination controls.

Alignment

Alignment is always relative to the container width instead of the entire page.

Centre

Pagination component centred within its container.

Left

Pagination component aligned to the left of its container.
Pagination component aligned to the right of its container.

Examples

LTR examples

Here is an example of the Pagination in LTR context.

Example of pagination used in an app context, showing a list of items with pagination controls below.

RTL examples

Here is an example of the Pagination in RTL context.

Example of pagination in a right-to-left layout, with controls and page order mirrored accordingly.
Back to top