Tag

Tagは、アイテムを説明するキーワードを使用して分類または整理するコンポーネントです。

Tag

<Tag>Tag</Tag>

使い方

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

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

import { Tag } from "@workspaces/ui"

<Tag />

バリアントを変更する

solidsubtlesurfaceoutline

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

サイズを変更する

smmdlg

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

カラースキー厶を変更する

successwarningerror

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

アイコンを使う

startIconendIcon

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

閉じるボタンを使う

Tag

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

閉じるボタンを無効にする

Tag

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`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は、onCloseが設定されると閉じるボタンを表示します。この閉じるボタンのaria-labelは、デフォルトで"タグを閉じる"を設定しています。もし、aria-labelを任意の値に変更したい場合は、closeButtonPropsにaria-labelを設定します。

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

キー	説明	状態
`Tab`	閉じるボタンにフォーカスを移動します。	`TagCloseButton`
`Enter`, `Space`	フォーカスされた閉じるボタンを実行します。	`TagCloseButton`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`TagCloseButton`	`role="button"`	閉じるボタンであることを示します。
	`aria-label`	`"タグを閉じる"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。