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
Accessibility
Currently, this section is being updated due to the migration of v2.