# Badge

> Source: https://design.nanatec.co.ke/components/badge/
> A small status indicator label with clean, modern design.

A small status indicator label with clean, modern design.

## Preview

```html
<nana-badge variant="primary">New</nana-badge>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-badge variant="primary">New</nana-badge>
```

## Variants

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

## API

## Events

| Event | Type | Description |
|---|---|---|
| `remove` | `CustomEvent` | — |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Badge text content |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-badge-bg` | — | Custom background color |
| `--nana-badge-color` | — | Custom text color |
| `--nana-badge-border` | — | Custom border color |

## CSS Parts

| Part | Description |
|---|---|
| `badge` | The badge label |
| `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/skeleton/">Skeleton</a></li>
  <li><a href="/components/tag/">Tag</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-badge--docs