A NSW Government website
Design System v3.4.0

Pagination

Pagination breaks down large amounts of content across a series of pages.

Figma React

Usage

Pagination allows users to see total number of pages, which page they are viewing, and how to navigate to other pages.

Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming.

Consider using pagination when a listing exceeds 10 results. Letting the user know on which page a particular piece of information is available makes it easier for them to find it again.

How this component works

Placement

Pagination is placed at the bottom of the content list to give users visibility and flexibility to move throughout the pages.

Controls

The next and back controls allow users to easily move forward and backward through the pages and selecting a page number takes a user to that page. The first and last page number should always show and a user’s current page is always highlighted.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.