Pagination
==========

*   GitHub: [BonnierNews/dn-design-system/web/src/commponents/pagination](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pagination)
*   Storybook: [Pagination](https://designsystem.dn.se/?path=/docs/basic-pagination--docs)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/pagination/pagination.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| pages | Array with page objects<br />PageData\[\] | \- |
| previousLabel | Previous button/link label<br />string | \- |
| previousUrl | Previous link<br />string | \- |
| previousClassNames | string | \- |
| previousAttributes | { \[key: string\]: string; } | \- |
| nextLabel | Previous button/link label<br />string | \- |
| nextUrl | Previous link<br />string | \- |
| nextClassNames | string | \- |
| nextAttributes | { \[key: string\]: string; } | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<Pagination
  attributes={{
    'aria-label': 'Paginering'
  }}
  nextAttributes={{}}
  nextLabel="Fredag 18 Maj"
  nextUrl="https://www.dn.se/om/danmark/?page=2"
  previousAttributes={{}}
  previousLabel="Söndag 20 Maj"
  previousUrl="https://www.dn.se/om/danmark/?page=1"
/>
```