Tag
Tag is a component used to categorize or organize items using keywords that describe them.
<Tag>Tag</Tag>
Usage
import { Tag } from "@yamada-ui/react"
import { Tag } from "@/components/ui"
import { Tag } from "@workspaces/ui"
<Tag />
Change Variants
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<Tag key={variant} variant={variant}>
{variant}
</Tag>
)}
</For>
</Wrap>
Change Size
<Wrap gap="md">
<For each={["sm", "md", "lg"]}>
{(size) => (
<Tag key={size} size={size}>
{size}
</Tag>
)}
</For>
</Wrap>
Change Color Scheme
<Wrap gap="md">
<For each={["success", "warning", "error"]}>
{(colorScheme) => (
<Tag key={colorScheme} colorScheme={colorScheme}>
{colorScheme}
</Tag>
)}
</For>
</Wrap>
Use with Icon
<Wrap gap="md">
<Tag startIcon={<PlusIcon />}>startIcon</Tag>
<Tag endIcon={<PlusIcon />}>endIcon</Tag>
</Wrap>
Use Close Button
const onClose = () => {
// Handle close action
console.log("Tag closed")
}
return <Tag onClose={onClose}>Tag</Tag>
"use client" to the top of the file.Disable Close Button
<Tag disabled onClose={() => {}}>
Tag
</Tag>
"use client" to the top of the file.Props
Accessibility
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>
Keyboard Navigation
| 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. |
Similar Components
Badge
Badge is a component that emphasizes the status of an item to make it immediately recognizable.
NativeTable
NativeTable is a component for efficiently organizing and displaying data.
Stat
Stat is used to display numbers or data within a box.
Table
Table is a table component equipped with column sorting, row selection, and click event features.
AreaChart
AreaChart is a component for drawing area charts to compare multiple sets of data.
BarChart
BarChart is a component for drawing bar charts to compare multiple sets of data.
Card
Card is a component that groups and displays related information. By default, it renders a article element.
ComposedChart
ComposedChart is a component for drawing composed charts to compare multiple sets of data.