Components
Pagination
Pagination is a list of buttons used to navigate between different pages of content, such as search results or tables.
React
Press Enter to start editing
const PreviewEn = () => { return ( <Pagination> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Previous page' data-variant='tertiary'> Previous </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Page 1' data-variant='tertiary'> 1 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Page 2' data-variant='primary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item /> <Pagination.Item> <Pagination.Button aria-label='Page 9' data-variant='tertiary'> 9 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Page 10' data-variant='tertiary'> 10 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Next page' data-variant='tertiary'> Next </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<PreviewEn />)
Use Pagination when
- search results or large amounts of data need to be divided across multiple pages
- users need to understand where they are within a larger set of content
- loading the entire dataset at once would be too heavy or result in poor performance
Avoid Pagination when
- the total amount of content is small enough to fit on a single page
- you want to divide a form into several pages
- progress needs to be displayed
Example
With links
You can use Pagination with anchor links for improved navigation.
React
Press Enter to start editing
const WithAnchorEn = () => { const [currentPage, setCurrentPage] = useState(2); const { pages, nextButtonProps, prevButtonProps } = usePagination({ currentPage, setCurrentPage, totalPages: 10, showPages: 7, }); return ( <Pagination aria-label='Sidenavigering'> <Pagination.List> <Pagination.Item> <Pagination.Button asChild aria-label='Previous page' {...prevButtonProps} > <a href='#previous-page'>Previous</a> </Pagination.Button> </Pagination.Item> {pages.map(({ page, itemKey, buttonProps }) => ( <Pagination.Item key={itemKey}> {typeof page === 'number' && ( <Pagination.Button asChild aria-label={`Page ${page}`} {...buttonProps} > <a href={`#page-${page}`}>{page}</a> </Pagination.Button> )} </Pagination.Item> ))} <Pagination.Item> <Pagination.Button asChild aria-label='Next page' {...nextButtonProps} > <a href='#next-page'>Next</a> </Pagination.Button> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<WithAnchorEn />)
Mobile variant
On mobile devices, you can show fewer pages and remove the text for previous/next.
React
Press Enter to start editing
const MobileEn = () => { return ( <Pagination> <Pagination.List> <Pagination.Item> <Pagination.Button aria-label='Previous page' data-variant='tertiary' /> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Page 2' data-variant='tertiary'> 2 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Page 3'>3</Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Page 4' data-variant='tertiary'> 4 </Pagination.Button> </Pagination.Item> <Pagination.Item> <Pagination.Button aria-label='Next page' data-variant='tertiary' /> </Pagination.Item> </Pagination.List> </Pagination> ); }; render(<MobileEn />)
Guidelines
Use Pagination when content is too large for a single page, such as search results or long lists, and the user needs to navigate back and forth.
Content should only be split across multiple pages if it improves loading time or usability.
Text
We use a fixed pattern for Pagination with the words “Previous” and “Next”.
Avoid “Previous page”, “Next page”, “Go back”, “Go forward”, “Continue” and “Back”.
Edit this page on github.com (opens in a new tab)