Components
Pagination
Pagination is a list of buttons used to navigate between different pages of content, such as search results or tables.
React
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 />)
- aria-label
- Description
Sets the screen reader label for the Pagination area
- Type
string- Default
Sidenavigering
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Sidenavigering | Sets the screen reader label for the Pagination area |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
PaginationItem
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
PaginationList
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Usage
Pagination is a stateless component, and you must control which pages are displayed.
Use usePagination for pagination logic together with the single-part components.
Read more about usePagination.
Examples
Default
The example shows `Pagination' with buttons that are not linked to any action. When you press, you will not navigate to another page.
React
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 />)
With links
Below you see usePagination used with Pagination to create pagination with links.
You use asChild to change Pagination.Button to <a>.
React
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
There is no built-in mobile support in Pagination, but you can show fewer pages and remove text for the previous/next buttons on mobile devices.
React
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 />)
HTML
You use the class name ds-pagination on a <nav> element.
Then you use a <ul> with <li> that has <button> or <a> with class name ds-button as a child.
If you add an empty <li> it will be displayed as an ellipsis (\2026).
The first and last <li> children will get an arrow icon based on whether it is the first or last <li>.
Note that you must add data-variant to <button> or <a> to get the correct style.
Each button should also have a descriptive aria-label for screen readers.
CSS variables and data attributes
| Name | Value |
|---|---|
| --dsc-pagination-gap | var(--ds-size-2) |
| --dsc-pagination-icon-size | var(--ds-size-6) |
| --dsc-pagination-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E") |
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)