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
アクセシビリティ
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"を設定します。 |