# Tag

Labels a status or attribute in a compact chip.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Tag.tsx)

## Overview

A tag is a compact label for a status or attribute.

Keep the text to a word or two.

## Examples

### Basic

```tsx
import { Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Tag intent="positive">
      <Tag.Dot />
      Settled
    </Tag>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Basic.tsx)

### Variant

Set `variant` to `soft`, `outlined`, or `plain`. It defaults to `soft`.

```tsx
import { style, Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <>
      {(['soft', 'outlined', 'plain'] as const).map((variant) => (
        <div key={variant} {...styles.row()}>
          {(['neutral', 'info', 'accent', 'positive', 'warning', 'negative'] as const).map(
            (intent) => (
              <Tag intent={intent} key={intent} variant={variant}>
                <Tag.Dot />
                {intent}
              </Tag>
            ),
          )}
        </div>
      ))}
    </>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Variant.tsx)

### Intent

Set `intent` to `neutral`, `info`, `accent`, `positive`, `warning`, or `negative`. It defaults to `neutral`.

```tsx
import { style, Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['neutral', 'info', 'accent', 'positive', 'warning', 'negative'] as const).map((intent) => (
        <Tag intent={intent} key={intent}>
          {intent}
        </Tag>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Intent.tsx)

### Shape

Set `shape` to `pill` or `rounded`. It defaults to `pill`.

```tsx
import { style, Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['pill', 'rounded'] as const).map((shape) => (
        <Tag intent="positive" key={shape} shape={shape}>
          {shape}
        </Tag>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Shape.tsx)

### Dot

Add a `Tag.Dot` before the label to mark a status.

```tsx
import { style, Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <Tag intent="positive" variant="plain">
        <Tag.Dot />
        Live rate
      </Tag>
      <Tag variant="plain">
        <Tag.Dot />
        Configuring
      </Tag>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Dot.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { style, Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Tag intent="positive" key={size} size={size}>
          <Tag.Dot />
          {size}
        </Tag>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Size.tsx)

### Render

Pass a `button` or link to `render` for an interactive tag with pointer, focus, and press feedback.

```tsx
import { style, Tag } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Tag key={size} render={<button type="button" />} size={size}>
          Stablecoins
        </Tag>
      ))}
      <Tag intent="info" render={<button type="button" />}>
        Info chip
      </Tag>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '2' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tag/Render.tsx)

## Guidelines

TODO: Write guidelines for Tag.