# Tag

A tiny label used to categorize or group items.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="tag-demo">
  <div className="flex items-center space-x-2 py-8">
    <Tag>
      DESIGN
    </Tag>

    <Tag variant="outline">
      DEVELOPMENT
    </Tag>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/tag.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import { Tag } from "@/components/ui/tag"

export function MyComponent() {
  return <Tag variant="outline">DEVELOPMENT</Tag>
}
```

## Examples [#examples]

### Base Variants [#base-variants]

Use the `variant` prop to change the base styling of the tag.

<ComponentPreview name="tag-variants">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Tag>
      Default
    </Tag>

    <Tag variant="secondary">
      Secondary
    </Tag>

    <Tag variant="outline">
      Outline
    </Tag>

    <Tag variant="destructive">
      Destructive
    </Tag>
  </div>
</ComponentPreview>

### Colors [#colors]

Tags support all the pre-defined semantic colors inherited from badges.

<ComponentPreview name="tag-colors">
  <div className="flex flex-wrap items-center justify-center gap-2 py-8">
    <Tag color="amber">
      Amber
    </Tag>

    <Tag color="blue">
      Blue
    </Tag>

    <Tag color="green">
      Green
    </Tag>

    <Tag color="purple">
      Purple
    </Tag>

    <Tag color="red">
      Red
    </Tag>

    <Tag color="gray">
      Gray
    </Tag>
  </div>
</ComponentPreview>

### With Icon [#with-icon]

You can render an icon inside the tag. Icons inherit the color and size.

<ComponentPreview name="tag-icon">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Tag variant="secondary">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>

       Verified
    </Tag>

    <Tag variant="outline">
      Docs 

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
    </Tag>
  </div>
</ComponentPreview>

### Shape [#shape]

While tags are primarily rectangular with slight rounding, you can enforce a pill shape using the `shape="pill"` prop.

<ComponentPreview name="tag-shape">
  <div className="flex flex-wrap items-center justify-center gap-4 py-8">
    <Tag shape="pill" color="blue">
      Pill Tag
    </Tag>

    <Tag shape="pill" variant="outline">
      Outline Pill
    </Tag>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Tag` component inherits all props from the `Badge` component. It uses a smaller, uppercase, widely tracked font by default.

| Prop      | Type      | Default     | Description                                     |
| --------- | --------- | ----------- | ----------------------------------------------- |
| `variant` | `enum`    | `"default"` | The visual style (inherits from Badge).         |
| `color`   | `enum`    | -           | Pre-defined semantic colors.                    |
| `size`    | `enum`    | `"default"` | The size of the tag.                            |
| `asChild` | `boolean` | `false`     | Render as a different element using Radix Slot. |