Tag

Tag is a component used to categorize or organize items using keywords that describe them.

Tag

<Tag>Tag</Tag>

Usage

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

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

import { Tag } from "@workspaces/ui"

<Tag />

Change Variants

solidsubtlesurfaceoutline

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

Change Size

smmdlg

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

Change Color Scheme

successwarningerror

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

Use with Icon

startIconendIcon

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

Use Close Button

Tag

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

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

If you use this code, you need to add "use client" to the top of the file.

Disable Close Button

Tag

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

If you use this code, you need to add "use client" to the top of the file.

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.

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.

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

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.

Tag