EmptyState
==========

*   GitHub: [BonnierNews/dn-design-system/web/src/commponents/empty-state](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/empty-state)
*   Storybook: [EmptyState](https://designsystem.dn.se/?path=/docs/basic-emptystate--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/empty-state/empty-state.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| iconName | Icon name to use in the pictogram<br />"search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| title | Title<br />string | \- |
| body | Body text<br />string | \- |
| brandButton | Object with text, href (optional), classNames (optional) and attributes (optional)<br />ButtonStandardProps | \- |
| primaryButton | Object with text, href (optional), classNames (optional) and attributes (optional)<br />ButtonStandardProps | \- |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<EmptyState
  body="Din sökning gav tyvärr inga träffar."
  iconName="delete"
  title="Attans då..."
/>
```