Tag

Tag is a component used to categorize or organize items using keywords that describe them.

Import

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

Copied!

Usage

Editable example

<Tag>Tag</Tag>

Copied!

Change Variant

Editable example

<Wrap gap="md">
  <For
    each={[
      { variant: "subtle", colorScheme: "primary" },
      { variant: "solid", colorScheme: "secondary" },
      { variant: "outline", colorScheme: "success" },
    ]}
  >
    {({ variant, colorScheme }, index) => (
      <Tag key={index} variant={variant} colorScheme={colorScheme}>
        {toTitleCase(colorScheme)}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

Change Size

Here is an example of a Tag that includes an icon.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <For
    each={[
      { name: "Small", colorScheme: "primary", size: "sm" },
      { name: "Medium", colorScheme: "secondary", size: "md" },
      { name: "Large", colorScheme: "success", size: "lg" },
    ]}
  >
    {({ name, colorScheme, size }, index) => (
      <Tag key={index} colorScheme={colorScheme} size={size}>
        {name}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

Change Color Scheme

Editable example

<VStack>
  <For each={["subtle", "solid", "outline"]}>
    {(variant, index) => (
      <Wrap key={index} gap="md">
        <For
          each={[
            "primary",
            "secondary",
            "success",
            "warning",
            "danger",
            "link",
            "gray",
            "neutral",
            "red",
            "rose",
            "pink",
            "orange",
            "amber",
            "yellow",
            "lime",
            "green",
            "emerald",
            "teal",
            "cyan",
            "sky",
            "blue",
            "indigo",
            "violet",
            "purple",
            "fuchsia",
          ]}
        >
          {(colorScheme, index) => (
            <Tag key={index} variant={variant} colorScheme={colorScheme}>
              {toTitleCase(colorScheme)}
            </Tag>
          )}
        </For>
      </Wrap>
    )}
  </For>
</VStack>

Copied!

Add an Icon

To add an icon, set a ReactElement to icon.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <For
    each={[
      {
        name: "Small",
        colorScheme: "primary",
        size: "sm",
        leftIcon: <PlusIcon />,
      },
      {
        name: "Medium",
        colorScheme: "secondary",
        size: "md",
        leftIcon: <PlusIcon />,
      },
      {
        name: "Large",
        colorScheme: "warning",
        size: "lg",
        leftIcon: <PlusIcon />,
      },
    ]}
  >
    {({ name, colorScheme, size, leftIcon }, index) => (
      <Tag
        key={index}
        colorScheme={colorScheme}
        size={size}
        leftIcon={leftIcon}
      >
        {name}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

Add a Close Button

To add a close button, set onClose.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(colorScheme, index) => (
      <Tag
        key={index}
        colorScheme={colorScheme}
        rounded="full"
        onClose={() => {}}
      >
        {toTitleCase(colorScheme)}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

Disable the Close Button

To disable the close button, set isDisabled to true.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(colorScheme, index) => (
      <Tag
        key={index}
        variant="solid"
        colorScheme={colorScheme}
        rounded="full"
        onClose={() => {}}
        isDisabled
      >
        {toTitleCase(colorScheme)}
      </Tag>
    )}
  </For>
</Wrap>

Copied!

Edit this page on GitHub

PreviousData Display NextBadge