Pill
====

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

Two variants available:

*   `link` — used for navigation, supports `selected` state and has an optional arrow icon
*   `button` — used as a toggleable button, supports `selected` state

| Name | Description | Default |
|:--- | :--- | :--- |
| variant | "link", "button" | "link" |
| href\* | string | \- |
| showIcon | boolean | \- |
| text\* | string | \- |
| size | "sm", "lg" | "lg" |
| selected | boolean | false |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
| onClick | () => void | \- |

```jsx
<Pill
  href="https://www.bonniernews.se"
  size="lg"
  text="Ukraina"
  variant="link"
/>
```