# Tag

The Tag component is a small, interactive UI element used to label, categorize, or filter content. It can display text or icons and often supports actions like deletion or selection. Tags enhance user experience by providing a clear and concise way to organize information, highlight key attributes, or manage items dynamically.

## Overview

```tsx
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return <Tag>Default</Tag>
}

export default Example
```

## Examples

The default use of `Stack` will stack its children vertically.

### Variants

Use the `variant` prop to change the appearance of the tag.

```tsx
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <div className="flex flex-col gap-lg">
      <div className="flex gap-2">
        <Tag variant="light-warm">Light Warm</Tag>
        <Tag>Default</Tag>
        <Tag variant="dark-warm">Dark Warm</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-brand">Light Brand</Tag>
        <Tag variant="brand">Brand</Tag>
        <Tag variant="dark-brand">Dark Brand</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-green">Light Green</Tag>
        <Tag variant="green">Green</Tag>
        <Tag variant="dark-green">Dark Green</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-orange">Light Orange</Tag>
        <Tag variant="orange">Orange</Tag>
        <Tag variant="dark-orange">Dark Orange</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-pink">Light Pink</Tag>
        <Tag variant="pink">Pink</Tag>
        <Tag variant="dark-pink">Dark Pink</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-red">Light Red</Tag>
        <Tag variant="red">Red</Tag>
        <Tag variant="dark-red">Dark Red</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-teal">Light Teal</Tag>
        <Tag variant="teal">Teal</Tag>
        <Tag variant="dark-teal">Dark Teal</Tag>
      </div>

      <div className="flex gap-2">
        <Tag variant="light-violet">Light Violet</Tag>
        <Tag variant="violet">Violet</Tag>
        <Tag variant="dark-violet">Dark Violet</Tag>
      </div>

      <Tag variant="dash">Dash</Tag>
    </div>
  )
}

export default Example
```

### Sizes

Use size property with `md` or `lg` (default).

```tsx
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <>
      <Tag size="md">Medium</Tag>
      <Tag size="lg">Large</Tag>
    </>
  )
}

export default Example
```

### With icon

Add an `icon` prop to display an icon alongside the tag text.

```tsx
import { Icon } from 'welcome-ui/Icon'
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <>
      <Tag icon={<Icon name="heart" />}>Favorite</Tag>
      <Tag icon={<Icon name="star" />} variant="orange">
        Featured
      </Tag>
      <Tag icon={<Icon name="calendar" />} variant="teal">
        Event
      </Tag>
      <Tag icon={<Icon name="map" />} variant="dash">
        Location
      </Tag>
    </>
  )
}

export default Example
```

### AI

Use the `ai` prop to automatically display a sparkles icon, and specific outline gradient colors. When `ai` is set to `true`, it overrides any custom icon.

```tsx
import { Icon } from 'welcome-ui/Icon'
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <>
      <Tag ai>AI Generated</Tag>
      <Tag ai variant="brand">
        AI Assistant
      </Tag>
      <Tag ai variant="blue">
        Machine Learning
      </Tag>
      <Tag ai disabled variant="brand">
        Neural Network
      </Tag>
      <Tag ai size="md" variant="green">
        Smart Feature
      </Tag>
      <Tag ai icon={<Icon name="user" />} size="md">
        AI overrides icon
      </Tag>
    </>
  )
}

export default Example
```

### List of clickable tags

When we have a clickable tag, we apply an hover state.

```tsx
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <>
      <Tag as="button" onClick={() => alert('clicked')} variant="blue">
        Blue
      </Tag>
      <Tag as="button" onClick={() => alert('clicked')} variant="dash">
        Dash
      </Tag>
      <Tag ai as="button" onClick={() => alert('clicked')} variant="teal">
        Teal
      </Tag>
      <Tag
        as="button"
        onClick={() => alert('clicked')}
        onRemove={() => alert('removed')}
        variant="pink"
      >
        Clickable with remove
      </Tag>
    </>
  )
}

export default Example
```

### One character

When we have only one character, we apply same size for the width and height

```tsx
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <>
      <Tag size="md">1</Tag>
      <Tag size="lg">1</Tag>
    </>
  )
}

export default Example
```

### OnRemove

Simply add a function `onRemove` to reveal a cross icon with a remove action (or other).

```tsx
import * as React from 'react'

import { Icon } from 'welcome-ui/Icon'
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  const [isHide, setHide] = React.useState(false)

  return isHide ? (
    <Tag icon={<Icon name="exclamation-triangle" />} variant="red">
      Tag removed
    </Tag>
  ) : (
    <Tag onRemove={() => setHide(true)}>Removable tag</Tag>
  )
}

export default Example
```

### Disabled

Use the `disabled` prop to disable tag interaction.

```tsx
import { Icon } from 'welcome-ui/Icon'
import { Tag } from 'welcome-ui/Tag'

const Example = () => {
  return (
    <>
      <Tag disabled onRemove={() => alert("Can't trigger it")}>
        Disabled
      </Tag>
      <Tag ai disabled variant="blue">
        Disabled
      </Tag>
      <Tag disabled variant="dash">
        Disabled
      </Tag>
      <Tag disabled variant="orange">
        Disabled
      </Tag>
      <Tag disabled icon={<Icon name="map" />} variant="green">
        Disabled with icon
      </Tag>
    </>
  )
}

export default Example
```

## Props

### Tag

```tsx
interface TagProps {
  ai?: boolean
  disabled?: boolean
  icon?: string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal
  onRemove?: () => void
  removeButtonProps?: ButtonProps
  size?: 'lg' | 'md'
  variant?: 'blue' | 'brand' | 'dark-blue' | 'dark-brand' | 'dark-green' | 'dark-orange' | 'dark-pink' | 'dark-red' | 'dark-teal' | 'dark-violet' | 'dark-warm' | 'dash' | 'green' | 'light-blue' | 'light-brand' | 'light-green' | 'light-orange' | 'light-pink' | 'light-red' | 'light-teal' | 'light-violet' | 'light-warm' | 'orange' | 'pink' | 'red' | 'teal' | 'violet' | 'warm'
}
```