# SilkeTag

A compact label component for categorization, status indicators, and metadata display. Tags can be interactive with click handlers, removable with close buttons, and support icons.

## Features

- **Color variants**: Yellow, green, red, gray, blue, purple, dark, and AI gradient
- **Two kinds**: Primary (filled) and secondary (outlined)
- **Icons**: Add icons or emoji to tags
- **Removable**: Optional close button with `onRemove` callback
- **Clickable**: Make tags interactive with `onClick`
- **Link support**: Navigate with the `link` prop
- **Size variants**: Base and tiny sizes

## Basic Usage

```js
<SilkeBox gap="s">
  <SilkeTag label="Default" />
  <SilkeTag label="Green" color="green" />
  <SilkeTag label="Red" color="red" />
  <SilkeTag label="Blue" color="blue" />
</SilkeBox>
```

## Color Variants

```js
<SilkeBox column gap="s">
  <SilkeBox gap="s" wrap>
    {['gray', 'yellow', 'green', 'red', 'blue', 'purple', 'dark', 'ai'].map((color) => (
      <SilkeTag key={color} color={color} label={color} />
    ))}
  </SilkeBox>
</SilkeBox>
```

## Primary vs Secondary

```js
<SilkeBox column gap="s">
  <SilkeBox gap="s">
    <SilkeTag kind="primary" label="Primary" color="blue" />
    <SilkeTag kind="primary" label="Primary" color="green" />
    <SilkeTag kind="primary" label="Primary" color="red" />
  </SilkeBox>
  <SilkeBox gap="s">
    <SilkeTag kind="secondary" label="Secondary" color="blue" />
    <SilkeTag kind="secondary" label="Secondary" color="green" />
    <SilkeTag kind="secondary" label="Secondary" color="red" />
  </SilkeBox>
</SilkeBox>
```

## With Icons

```js
<SilkeBox gap="s" wrap>
  <SilkeTag label="Settings" icon="settings" />
  <SilkeTag label="User" icon="user" color="blue" />
  <SilkeTag label="Warning" icon="warning.triangle" color="yellow" />
  <SilkeTag label="Success" icon="check" color="green" />
  <SilkeTag label="Error" icon="error" color="red" />
</SilkeBox>
```

## Icon Only

Tags without labels display as compact square icons:

```js
<SilkeBox gap="s">
  <SilkeTag icon="star" color="yellow" />
  <SilkeTag icon="check" color="green" />
  <SilkeTag icon="close" color="red" />
  <SilkeTag icon="user" color="blue" />
  <SilkeTag icon="settings" color="gray" />
</SilkeBox>
```

## Removable Tags

Add an `onRemove` callback to show a close button:

```js
const [tags, setTags] = React.useState(['React', 'TypeScript', 'Node.js', 'CSS']);

<SilkeBox gap="s" wrap>
  {tags.map((tag) => (
    <SilkeTag
      key={tag}
      label={tag}
      color="blue"
      onRemove={() => setTags(tags.filter((t) => t !== tag))}
    />
  ))}
</SilkeBox>;
```

## Secondary with Icon and Remove

Secondary tags show the remove button as the icon:

```js
<SilkeBox gap="s">
  <SilkeTag kind="secondary" label="Removable" icon="star" color="blue" onRemove={() => {}} />
  <SilkeTag kind="secondary" label="Removable" icon="check" color="green" onRemove={() => {}} />
</SilkeBox>
```

## Sizes

```js
<SilkeBox column gap="s">
  <SilkeBox gap="s" vAlign="center">
    <SilkeTag label="Base size" />
    <SilkeTag label="With icon" icon="star" />
  </SilkeBox>
  <SilkeBox gap="s" vAlign="center">
    <SilkeTag size="tiny" label="Tiny size" />
    <SilkeTag size="tiny" label="With icon" icon="star" />
  </SilkeBox>
</SilkeBox>
```

## Clickable Tags

Make tags interactive with `onClick`:

```js
const [selected, setSelected] = React.useState('react');
const options = ['react', 'vue', 'angular', 'svelte'];

<SilkeBox gap="s">
  {options.map((opt) => (
    <SilkeTag
      key={opt}
      label={opt}
      color={selected === opt ? 'blue' : 'gray'}
      onClick={() => setSelected(opt)}
    />
  ))}
</SilkeBox>;
```

## Disabled State

```js
<SilkeBox gap="s">
  <SilkeTag label="Enabled" color="blue" />
  <SilkeTag label="Disabled" color="blue" disabled />
  <SilkeTag label="Disabled" color="green" disabled />
</SilkeBox>
```

## As Links

Navigate to routes using the `link` prop:

```js
<SilkeBox gap="s">
  <SilkeTag label="Home" icon="home" link="/" />
  <SilkeTag label="Settings" icon="settings" link="/settings" />
</SilkeBox>
```

## Shorthand Components

Pre-colored tag components for convenience:

```js
<SilkeBox gap="s">
  <SilkeTagDark label="Dark" />
  <SilkeTagYellow label="Yellow" />
  <SilkeTagGreen label="Green" />
  <SilkeTagRed label="Red" />
  <SilkeTagGray label="Gray" />
  <SilkeTagBlue label="Blue" />
</SilkeBox>
```

## Props

| Prop       | Type                              | Default     | Description                          |
| ---------- | --------------------------------- | ----------- | ------------------------------------ |
| `label`    | `React.ReactNode`                 | -           | Tag text content                     |
| `color`    | `SilkeTagColor`                   | `'gray'`    | Tag color variant                    |
| `kind`     | `'primary' \| 'secondary'`        | `'primary'` | Tag style variant                    |
| `size`     | `'tiny'`                          | -           | Smaller tag size                     |
| `icon`     | `SilkeIcons`                      | -           | Icon to display                      |
| `disabled` | `boolean`                         | `false`     | Disable tag interactions             |
| `link`     | `string`                          | -           | Navigate to route on click           |
| `innerGap` | `BoxSpace`                        | `'xs'`      | Gap between icon and label           |
| `onRemove` | `(e: React.MouseEvent) => void`   | -           | Show close button and handle removal |
| `onClick`  | `(e: React.MouseEvent) => void`   | -           | Click handler                        |

Also accepts all `SilkeBox` props.

## Types

```typescript
type SilkeTagKind = 'primary' | 'secondary';

type SilkeTagColor = 'yellow' | 'green' | 'red' | 'gray' | 'blue' | 'purple' | 'dark' | 'ai';

type SilkeTagSize = 'tiny';
```

## Shorthand Components

| Component        | Description              |
| ---------------- | ------------------------ |
| `SilkeTagDark`   | Tag with `color="dark"`  |
| `SilkeTagYellow` | Tag with `color="yellow"`|
| `SilkeTagGreen`  | Tag with `color="green"` |
| `SilkeTagRed`    | Tag with `color="red"`   |
| `SilkeTagGray`   | Tag with `color="gray"`  |
| `SilkeTagBlue`   | Tag with `color="blue"`  |