ButtonToggle
============

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

### [](#javascript)Javascript

```javascript
import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
dsButtonToggle(toggleElements);
```

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/button-toggle/button-toggle.scss";`

| Name | Description | Default |
|:--- | :--- | :--- |
| isIconButton | boolean | false |
| selectedText | string | \- |
| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | "primary" |
| text | Note: only works on button-tag, not on a-tag<br />string | \- |
| disabled | boolean | false |
| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| fullWidth | Button will be full width on both desktop and mobile<br />boolean | false |
| classNames | string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />{ \[key: string\]: string; } | { } |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
| size | "sm", "lg", "md", "xl" | "md" |
| loading | boolean | false |
| selected | boolean | false |
| selectedIconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| mobileFullWidth | Button will only full width on mobile<br />boolean | false |

```jsx
<ButtonToggle
  selectedText="Följer"
  size="lg"
  text="Följ"
  variant="primary"
/>
```