> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/tag.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Tag

Label content categories or statuses.

## Basic usage


defaultprimarysuccessinfowarningerror

PublishedCompletedDismissibleLarge tag

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/tag/basic.tsx"
import { Flex, Space, Tag } from '@ifhover/leaf-ui';

import { Check } from 'lucide-react';

export function TagBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex gap="md" align="center" wrap justify="center">
        {(['default', 'primary', 'success', 'info', 'warning', 'error'] as const).map((color) => (
          <Tag key={color} color={color}>
            {color}
          </Tag>
        ))}
      </Flex>
      <Flex gap="md" align="center" wrap justify="center">
        <Tag color="primary" variant="solid">
          Published
        </Tag>
        <Tag color="success" icon={<Check />}>
          Completed
        </Tag>
        <Tag color="#7654c6" closable>
          Dismissible
        </Tag>
        <Tag size="lg" color="primary">
          Large tag
        </Tag>
      </Flex>
    </Space>
  );
}
```

Expand code

## Tag API

| Prop       | Type                                                                              | Default     | Description                                                            |
| ---------- | --------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------- |
| `children` | `ReactNode`                                                                       | —           | Tag content                                                            |
| `color`    | `'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| string` | `'default'` | Semantic or custom color                                               |
| `variant`  | `'soft' \| 'solid'`                                                               | `'soft'`    | Tinted or solid appearance, both borderless with small rounded corners |
| `size`     | `'sm' \| 'md' \| 'lg'`                                                            | `'md'`      | Tag size                                                               |
| `icon`     | `ReactNode`                                                                       | —           | Leading icon                                                           |
| `closable` | `boolean`                                                                         | `false`     | Show a close button                                                    |
| `onClose`  | `(event: MouseEvent<HTMLButtonElement>) => void`                                  | —           | Called on close                                                        |

## Types

Import the component props and item types when preparing your own values.

```ts
import type { TagProps, CheckableTagProps, TagGroupProps, TagOption } from '@ifhover/leaf-ui';
```

## Usage notes

Tags use borderless fills and small rounded corners, with tinted and solid appearances. The radius follows the regional theme; set `ConfigProvider`'s `theme.components.Tag.borderRadius` for a component override.

Call event.preventDefault() to prevent removal. In a dynamic list, onClose can update application state to remove the matching item.

## CheckableTagProps API

| Property         | Type                         | Default | Description              |
| ---------------- | ---------------------------- | ------- | ------------------------ |
| `checked`        | `boolean`                    | —       | Controlled checked state |
| `defaultChecked` | `boolean`                    | `false` | Initial checked state    |
| `onChange`       | `(checked: boolean) => void` | —       | Value change callback    |
| `size`           | `'sm' \| 'md' \| 'lg'`       | `'md'`  | Size or spacing preset   |

## TagGroupProps API

| Property       | Type                                     | Default  | Description                                         |
| -------------- | ---------------------------------------- | -------- | --------------------------------------------------- |
| `options`      | [`readonly TagOption[]`](#tagoption-api) | Required | Available options                                   |
| `value`        | `readonly string[]`                      | —        | Controlled value                                    |
| `defaultValue` | `readonly string[]`                      | `[]`     | Initial value, restored by uncontrolled form resets |
| `onChange`     | `(values: string[]) => void`             | —        | Value change callback                               |
| `disabled`     | `boolean`                                | —        | Disable interactions                                |
| `size`         | `'sm' \| 'md' \| 'lg'`                   | `'md'`   | Size or spacing preset                              |
| `name`         | `string`                                 | —        | Form field name                                     |
| `form`         | `string`                                 | —        | Associated form ID                                  |
| `required`     | `boolean`                                | —        | Required form validation                            |

## TagOption API

| Property   | Type        | Default  | Description          |
| ---------- | ----------- | -------- | -------------------- |
| `value`    | `string`    | Required | Controlled value     |
| `label`    | `ReactNode` | Required | Display label        |
| `disabled` | `boolean`   | —        | Disable interactions |