---
title: Tag
description: "`Tag` is a component used to categorize or organize items using keywords that describe them."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/tag/tag.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/tag
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-tag--basic
---

```tsx
<Tag>Tag</Tag>
```

## Usage

```tsx
import { Tag } from "@yamada-ui/react"
```

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

```tsx
import { Tag } from "@workspaces/ui"
```

```tsx
<Tag />
```

### Change Variants

```tsx
<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant) => (
      <Tag key={variant} variant={variant}>
        {variant}
      </Tag>
    )}
  </For>
</Wrap>
```

### Change Size

```tsx
<Wrap gap="md">
  <For each={["sm", "md", "lg"]}>
    {(size) => (
      <Tag key={size} size={size}>
        {size}
      </Tag>
    )}
  </For>
</Wrap>
```

### Change Color Scheme

```tsx
<Wrap gap="md">
  <For each={["success", "warning", "error"]}>
    {(colorScheme) => (
      <Tag key={colorScheme} colorScheme={colorScheme}>
        {colorScheme}
      </Tag>
    )}
  </For>
</Wrap>
```

### Use with Icon

```tsx
<Wrap gap="md">
  <Tag startIcon={<PlusIcon />}>startIcon</Tag>
  <Tag endIcon={<PlusIcon />}>endIcon</Tag>
</Wrap>
```

### Use Close Button

```tsx
const onClose = () => {
  // Handle close action
  console.log("Tag closed")
}

return <Tag onClose={onClose}>Tag</Tag>
```

### Disable Close Button

```tsx
<Tag disabled onClose={() => {}}>
  Tag
</Tag>
```

## Uses Components & Hooks

<Uses name="tag" />

## Props

| Prop               | Default    | Type                                                                                                                      | Description                                               |
| ------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `as`               | -          | `As`                                                                                                                      | The HTML element to render.                               |
| `asChild`          | -          | `boolean`                                                                                                                 | Merges its props onto its immediate child.                |
| `css`              | -          | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                           |
| `colorScheme`      | -          | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                               |
| `size`             | `"md"`     | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                                |
| `variant`          | `"subtle"` | `"outline" \| "plain" \| "solid" \| "subtle" \| "surface" ...`                                                            | The variant of the component.                             |
| `closeButtonProps` | -          | `TagCloseButtonProps`                                                                                                     | Props for tag close button element.                       |
| `contentProps`     | -          | `TagContentProps`                                                                                                         | Props for content element.                                |
| `disabled`         | `false`    | `boolean`                                                                                                                 | If `true`, the tag is disabled.                           |
| `endIcon`          | -          | `ReactNode`                                                                                                               | Icon to be displayed to the end of the tag.               |
| `iconProps`        | -          | `HTMLStyledProps<"span">`                                                                                                 | Props for icon element.                                   |
| `onClose`          | -          | `MouseEventHandler<HTMLElement>`                                                                                          | Function to be executed when the close button is clicked. |
| `startIcon`        | -          | `ReactNode`                                                                                                               | Icon to be displayed to the start of the tag.             |

## Accessibility

`Tag` displays a close button when `onClose` is set. The `aria-label` of this close button is set to `"Close tag"` by default. If you want to change the `aria-label` to a custom value, set the `aria-label` in `closeButtonProps`.

```tsx
<Tag onClose={() => {}} closeButtonProps={{ "aria-label": "Close custom tag" }}>
  Tag
</Tag>
```

### Keyboard Navigation

| Key              | Description                        | State            |
| ---------------- | ---------------------------------- | ---------------- |
| `Tab`            | Moves focus to the close button.   | `TagCloseButton` |
| `Enter`, `Space` | Executes the focused close button. | `TagCloseButton` |

### ARIA Roles and Attributes

| Component        | Roles and Attributes | Usage                                  |
| ---------------- | -------------------- | -------------------------------------- |
| `TagCloseButton` | `role="button"`      | Indicates that this is a close button. |
|                  | `aria-label`         | Sets to `"Close tag"`.                 |
|                  | `aria-disabled`      | Sets to `"true"` if `disabled` is set. |