- GitHub: [BonnierNews/dn-design-system/../web/src/components/button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/button)
- Storybook: [Buttons > Button](https://designsystem.dn.se/?path=/docs/basic-buttons-button--docs)
- Storybook (Latest): [Buttons > Button](https://designsystem-latest.dn.se/?path=/docs/basic-buttons-button--docs)

----

# Button

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|text | String | yes | | | |
|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
|emphasis | String | no | default, elevated, outline, transparent | default | |
|rounded | bool | no | true, false | false | Button will be rounded |
|size| String | no | small, medium, large, xlarge | medium | |
|fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
|mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
|iconPosition | String | no | none, left, right | none | |
|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
|loading | bool | no | true, false | false | |
|type | String | no | button, submit | button | |
|href | String | no | | | If href is set the button will be rendered as an a-tag |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## 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/button/button.njk' import Button %}

{{ Button({
  text: 'Primary with icon',
  variant: 'primary',
  iconPosition: 'left',
  iconName: 'plus',
  mobile: {
    fullWidth: true
  },
})}}
```

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