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
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。