- GitHub: [BonnierNews/dn-design-system/../web/src/basic/empty-state](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/basic/empty-state)
- Storybook: [EmptyState](https://designsystem.dn.se/?path=/docs/basic-emptystate--docs)
- Storybook (Latest): [EmptyState](https://designsystem-latest.dn.se/?path=/docs/basic-emptystate--docs)

----

# Empty state

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
| iconName | String | no | add, arrow_back, delete etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
| title | String | no | | | Title for empty state |
| body | String | no | | | Describing text |
| brandButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional).|
| primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
| classNames | String | no | | | Ex. "my-special-class" |
| attributes | Object | no | | | Ex. { data-prop: value } |

## 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/empty-state/empty-state.njk' import EmptyState %}

{{ EmptyState({ 
    iconName: "delete",
    title: "Attans då...",
    body: "Din sökning gav tyvärr inga träffar.",
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/basic/empty-state/empty-state" as *;
```