# antuikit / Tag

> Tag with `emphasis`, `size`, `shape`, a status dot, an avatar and theme palette colors.

Docs: https://antuikit.com/docs/components/tag

## Install

npx antuikit@latest init
npx antuikit@latest add tag

## Import

import { Tag } from "@/components/ui/tag";

## Demos

- [Basic](https://ui.antuikit.com/embed/tag/basic.md): A plain `Tag`, then one with an `icon`, one with only an icon, a `status` dot, an `avatar` and a `closable` one.
- [Named colors](https://ui.antuikit.com/embed/tag/preset-and-palette-colors.md): Set `color` to a status, a color name like `magenta` or `fuchsia`, in any `variant`.
- [Custom colors](https://ui.antuikit.com/embed/tag/custom-colors.md): Pass `color` any CSS color, like `#f50`, for a one-off tag derived from that color, with every `variant`.
- [Emphasis](https://ui.antuikit.com/embed/tag/emphasis.md): Set `emphasis="subtle"` for a quieter tag with a neutral fill and no border, which keeps the colored text of its status.
- [Size](https://ui.antuikit.com/embed/tag/size.md): Set `size="small"` for a shorter tag with smaller text, for dense rows of metadata like versions or environments.
- [Shape](https://ui.antuikit.com/embed/tag/shape.md): Set `shape` to `"squircle"` for smoothed corners or `"round"` for a pill, with any color, icon or status.
- [Squircle](https://ui.antuikit.com/embed/tag/squircle.md): `shape="squircle"` bends the corners into a superellipse in Chromium 139 and later, and shows plain corners elsewhere.
- [Status dot](https://ui.antuikit.com/embed/tag/status-dot.md): Set `status` to show a status dot before the label, with a pulsing ring for `processing`, like Healthy or Deploying.
- [Icons](https://ui.antuikit.com/embed/tag/with-icon-status.md): Pass `icon` a node to show a glyph before the label, in the tag's text color, like a spinner beside Deploying.
- [Icons with colors](https://ui.antuikit.com/embed/tag/with-icon-colors.md): An `icon` takes the tag's text color with any `color` and `variant`, and sits beside a close button.
- [Icon only](https://ui.antuikit.com/embed/tag/icon-only.md): Pass `icon` and no children for a square tag, and set `title` so hovering the tag names it.
- [Avatar](https://ui.antuikit.com/embed/tag/avatar.md): Pass `avatar` an image URL to show a small picture at the start of the tag, like a face beside a person's name.
- [Avatar shapes](https://ui.antuikit.com/embed/tag/avatar-shapes.md): The `avatar` follows the tag's `shape`: a circle on a round tag and a rounded square on the others.
- [Closable](https://ui.antuikit.com/embed/tag/closable.md): Set `closable` to add a close button in the tag's own color, and handle `onClose` to remove the tag from your list.
- [Close icon](https://ui.antuikit.com/embed/tag/close-icon.md): Pass `closeIcon` a node to change the close glyph, or `closable` an object to give the button its own `aria-label`.
- [Checkable](https://ui.antuikit.com/embed/tag/checkable.md): `Tag.CheckableTag` toggles `checked` on click, for a single on and off choice like Follow and Following.
- [Checkable group](https://ui.antuikit.com/embed/tag/checkable-group.md): Pass `options` to `Tag.CheckableTagGroup` for a row of toggles and `multiple` to let several stay checked, here in the default shape and `round`.
- [Link tags](https://ui.antuikit.com/embed/tag/links.md): Pass `href` to render the tag as a link that keeps the tag's color, shape and icon.
- [Issue label manager](https://ui.antuikit.com/embed/tag/label-manager.md): An issue's labels as closable tags, with a dashed button that opens an input for adding a new one.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tag`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Tag` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.