Version
has been released! Read the upgrade guide

Pagination

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Navigate between multiple pages of records.

Overview

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.

1Usage

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

2Anatomy

  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.

3Sizing & Spacing

The Pagination component is of fixed size.

4States (if applicable)

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

5Hierarchy & 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.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright