TextButtonToggle
================

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

| Name | Description | Default |
|:--- | :--- | :--- |
| selected | Whether the button is selected<br />boolean | false |
| text\* | The text to display on the button<br />string | \- |
| selectedText\* | The text to display when the button is selected<br />string | \- |
| iconName\* | 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" | \- |
| selectedIconName\* | 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" | \- |
| disabled | Note: only works on button-tag, not on a-tag<br />boolean | false |
| loading | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />boolean | false |
| type | Button type<br />"button", "submit", "reset" | "button" |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<TextButtonToggle
  iconName="bookmarked"
  selectedIconName="bookmark-filled"
  selectedText="Sparad"
  text="Spara artikel"
/>
```