Components
Pagination
Pagination is a list of buttons used to navigate between different pages of content, such as search results or tables.
React
Unable to parse html
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
'Bla i sider'
- data-current
- Description
Current page number
- Type
string
- data-total
- Description
Total number of pages
- Type
string
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior. @deprecated This is not supported anymore, as the element needs to be `ds-pagination`
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Bla i sider' | Sets the screen reader label for the Pagination area |
| data-current | string | - | Current page number |
| data-total | string | - | Total number of pages |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. @deprecated This is not supported anymore, as the element needs to be `ds-pagination` |
PaginationButton
- aria-current
- Description
Toggle button as active Indicates the element that represents the current item within a container or set of related elements.
- Type
boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time"- Default
false
- 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-current | boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | false | Toggle button as active Indicates the element that represents the current item within a container or set of related elements. |
| 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
Unable to parse html
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
Unable to parse html
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
Unable to parse html
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
Add the class name ds-pagination to the <ds-pagination> element.
The web component automatically fills the buttons or anchors based on the data attributes data-current and data-total.
If you wish to use your own buttons you can add them inside <a> or <button> elements inside <ds-pagination>.
If you fill these with text, and do not send any attributes, the web component will not change the buttons.
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") |
| --dsc-pagination-ellipsis | "\2026" |
| --dsc-pagination-label | "Bla i sider" |
| --dsc-button-background--active | var(--ds-color-base-active) |
| --dsc-button-background--hover | var(--ds-color-base-hover) |
| --dsc-button-background | var(--ds-color-base-default) |
| --dsc-button-color | var(--ds-color-base-contrast-default) |
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)