- GitHub: [BonnierNews/dn-design-system/../web/src/components/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)
- Storybook (Latest): [Pagination](https://designsystem-latest.dn.se/?path=/docs/basic-pagination--docs)

----

# Pagination

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|pages | Array | no | | | Array with link objects. Ex. [ { label: '8' , url: 'https://www.dn.se/om/danmark/?page=8', current: true, attributes: {} } ] |
|previousLabel | String | no | 'Föregående' | | Previous button/link label |
|previousUrl | String | no | | | |
|previousAttributes | Object | no | | | |
|previousClassNames | String | no | | | |
|nextLabel | String | no | 'Nästa' | | Next button/link label |
|nextUrl | String | no | | | |
|nextAttributes | Object | no | | | |
|nextClassNames | String | no | | | |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | | | | | Not supported |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/pagination/pagination.njk' import Pagination %}

{{ Pagination({
  nextUrl: 'https://www.dn.se/om/danmark/?page=8',
  nextLabel: undefined,
  previousUrl: 'https://www.dn.se/om/danmark/?page=7',
  previousLabel: undefined,
  pages: [
    { label: '6', url: 'https://www.dn.se/om/danmark/?page=6', attributes: {} },
    { label: '7', url: 'https://www.dn.se/om/danmark/?page=7' },
    { label: '8', url: 'https://www.dn.se/om/danmark/?page=8', current: true },
    { label: '9', url: 'https://www.dn.se/om/danmark/?page=9' },
    { label: '10', url: 'https://www.dn.se/om/danmark/?page=10' },
  ],
  attributes: {},
  classNames: undefined,
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/pagination/pagination" as *;
```