# Tag

> Source: https://design.nanatec.co.ke/components/tag/
> A compact label for categories, keywords, or filters. Optionally removable.

A compact label for categories, keywords, or filters. Optionally removable.

## Preview

```html
<nana-tag variant="primary">Design</nana-tag>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/tag";
```

## Basic usage

```html
<nana-tag variant="primary">Design</nana-tag>
```

## Variants

```html
<nana-tag variant="primary">Primary</nana-tag>
<nana-tag variant="success">Success</nana-tag>
<nana-tag variant="warning">Warning</nana-tag>
<nana-tag variant="danger">Danger</nana-tag>
<nana-tag variant="info">Info</nana-tag>
<nana-tag variant="neutral">Neutral</nana-tag>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-remove` | `CustomEvent` | Emitted when the remove button is activated. |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The tag's text content. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-tag-bg` | — | Background colour. |
| `--nana-tag-color` | — | Text colour. |
| `--nana-tag-border` | — | Border colour. |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The component's host container |
| `content` | The text content wrapper |
| `remove-button` | The remove button (when `removable`) |

## Related components

<ul class="related not-content">
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/badge/">Badge</a></li>
  <li><a href="/components/skeleton/">Skeleton</a></li>
  <li><a href="/components/spinner/">Spinner</a></li>
  <li><a href="/components/progress-bar/">Progress Bar</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-tag--docs