Back to components


Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Table of Contents

Edit this section, Opens in new window


When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.

Primarily, put pagination on the bottom of the table. If the table does not fit on the screen, use pagination above the table aswell.

Edit this section, Opens in new window


Default pagination
Minimal pagination
Default pagination with disabled arrows

Disabled buttons is shown when the data set is at the end, or beginning of the data set.


Use pagination to:

  • Present lists that contain specific items a user may need to find in order to complete their task.
  • Navigate lists that can be sorted and/or filtered.

We use both pagination and load more to segment results depending on the user's task. Compare these guidelines with the Discovery vs browsing usage guidelines if you are unsure of which to use.

Table title

Additional description if needed

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123
  1. Pagination


Identify the current page

Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.

Provide various options for navigating

Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data.



  1. Go to first page
  2. Go to next page
  3. Page
  4. Current page
  5. Truncated pages
  6. Go to next page
  7. Go to last page
  8. Showing the current page set and total number of pages



Always anchor to the bottom of the list when the user interacts with the pagination component. If the data-set does not fit on the screen, use pagination above the table aswell.


Truncation is shown using when the number of pages exceeds the pagination display limit.

Page counters

When page counters are not available due to a technical restraint, the minimal pagination version may be used without the page count.



2px dotted outline with color BL 1, BLUE.

Edit this section, Opens in new window



Use the pagination dots when you want to control


Pagination dots comes in two sizes, default and small.


Pagination dots
  1. Page indicator
  2. Current page indicator
  1. The outline is LB 1, LIGHT BROWN 30%
  2. The fill color for current is BL 1, BLUE




The hover color is BR 1, BROWN



2px border with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.



Smaller pagination dots can be used depending on the size of the object(s) it controls.

Edit this section, Opens in new window


View the videos at a11ymattters, Accessible Pagination for a demonstration of before and after pagination tests using a screen reader voiceover.

This component has compliance WCAG guidelines by:

  • WCAG 2.4.8: Information about the user's location within a set of Web pages is available
  • WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
  • WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
  • WCAG 2.4.7: Focus is visible
  • WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them


  • The pagination should be keyboard navigation friendly
  • A screen reader should easily pick up the pagination
  • Each navigation item should be read as "Goto Page 1".
  • We need to tell the user which element is currently active.
  • The pagination should have Next and Previous links, where applicable.
Edit this section, Opens in new window
Contact us, Opens in new window