Modal
=====

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

| Name | Description | Default |
|:--- | :--- | :--- |
| title | Title in modal<br />string | \- |
| modalType | Appearance of the modal<br />"standard", "sheet" | "standard" |
| primaryButton | Object with text, href (optional), classNames (optional) and attributes (optional)<br />ButtonStandardProps | \- |
| secondaryButton | Object with text, href (optional), classNames (optional) and attributes (optional). Set isCloseButton to true if you wanna close modal with this button<br />ButtonStandardProps & { isCloseButton?: boolean; } | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { data-prop: value }<br />object | \- |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
| children | Content to show in the modal as preact components<br />ComponentChildren | \- |

```jsx
<Modal
  primaryButton={{
    href: 'www.dn.se',
    text: 'Ja, logga ut'
  }}
  secondaryButton={{
    isCloseButton: true,
    text: 'Avbryt'
  }}
  title="Är du säker på att du vill logga ut?"
>
  <p>
    DN är bäst i inloggat läge - som inloggad prenumerant har du obegränsad läsning på dn.se och tillgång till flera smarta funktioner.  </p>
</Modal>
```