Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Tag

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

Source@yamada-ui/tag

Import

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

Usage

Editable example

<Tag>Tag</Tag>
Copied!

Change Variant

Editable example

<Wrap gap="md">
  <Tag variant="subtle" colorScheme="primary">
    Primary
  </Tag>
  <Tag variant="solid" colorScheme="secondary">
    Secondary
  </Tag>
  <Tag variant="outline" colorScheme="success">
    Success
  </Tag>
</Wrap>
Copied!

Change Size

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

Editable example

<Wrap gap="md" alignItems="flex-start">
  <Tag colorScheme="primary" size="sm">
    Small
  </Tag>
  <Tag colorScheme="secondary" size="md">
    Medium
  </Tag>
  <Tag colorScheme="warning" size="lg">
    Large
  </Tag>
</Wrap>
Copied!

Change Color Scheme

Editable example

<VStack>
  <Wrap gap="md">
    <Tag variant="subtle" colorScheme="primary">
      Primary
    </Tag>
    <Tag variant="subtle" colorScheme="secondary">
      Secondary
    </Tag>
    <Tag variant="subtle" colorScheme="success">
      Success
    </Tag>
    <Tag variant="subtle" colorScheme="warning">
      Warning
    </Tag>
    <Tag variant="subtle" colorScheme="danger">
      Danger
    </Tag>
    <Tag variant="subtle" colorScheme="link">
      Link
    </Tag>
    <Tag variant="subtle" colorScheme="gray">
      Gray
    </Tag>
    <Tag variant="subtle" colorScheme="neutral">
      Neutral
    </Tag>
    <Tag variant="subtle" colorScheme="red">
      Red
    </Tag>
    <Tag variant="subtle" colorScheme="rose">
      Rose
    </Tag>
    <Tag variant="subtle" colorScheme="pink">
      Pink
    </Tag>
    <Tag variant="subtle" colorScheme="orange">
      Orange
    </Tag>
    <Tag variant="subtle" colorScheme="amber">
      Amber
    </Tag>
    <Tag variant="subtle" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag variant="subtle" colorScheme="lime">
      Lime
    </Tag>
    <Tag variant="subtle" colorScheme="green">
      Green
    </Tag>
    <Tag variant="subtle" colorScheme="emerald">
      Emerald
    </Tag>
    <Tag variant="subtle" colorScheme="teal">
      Teal
    </Tag>
    <Tag variant="subtle" colorScheme="cyan">
      Cyan
    </Tag>
    <Tag variant="subtle" colorScheme="sky">
      Sky
    </Tag>
    <Tag variant="subtle" colorScheme="blue">
      Blue
    </Tag>
    <Tag variant="subtle" colorScheme="indigo">
      Indigo
    </Tag>
    <Tag variant="subtle" colorScheme="violet">
      Violet
    </Tag>
    <Tag variant="subtle" colorScheme="purple">
      Purple
    </Tag>
    <Tag variant="subtle" colorScheme="fuchsia">
      Fuchsia
    </Tag>
  </Wrap>

  <Wrap gap="md">
    <Tag variant="solid" colorScheme="primary">
      Primary
    </Tag>
    <Tag variant="solid" colorScheme="secondary">
      Secondary
    </Tag>
    <Tag variant="solid" colorScheme="success">
      Success
    </Tag>
    <Tag variant="solid" colorScheme="warning">
      Warning
    </Tag>
    <Tag variant="solid" colorScheme="danger">
      Danger
    </Tag>
    <Tag variant="solid" colorScheme="link">
      Link
    </Tag>
    <Tag variant="solid" colorScheme="gray">
      Gray
    </Tag>
    <Tag variant="solid" colorScheme="neutral">
      Neutral
    </Tag>
    <Tag variant="solid" colorScheme="red">
      Red
    </Tag>
    <Tag variant="solid" colorScheme="rose">
      Rose
    </Tag>
    <Tag variant="solid" colorScheme="pink">
      Pink
    </Tag>
    <Tag variant="solid" colorScheme="orange">
      Orange
    </Tag>
    <Tag variant="solid" colorScheme="amber">
      Amber
    </Tag>
    <Tag variant="solid" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag variant="solid" colorScheme="lime">
      Lime
    </Tag>
    <Tag variant="solid" colorScheme="green">
      Green
    </Tag>
    <Tag variant="solid" colorScheme="emerald">
      Emerald
    </Tag>
    <Tag variant="solid" colorScheme="teal">
      Teal
    </Tag>
    <Tag variant="solid" colorScheme="cyan">
      Cyan
    </Tag>
    <Tag variant="solid" colorScheme="sky">
      Sky
    </Tag>
    <Tag variant="solid" colorScheme="blue">
      Blue
    </Tag>
    <Tag variant="solid" colorScheme="indigo">
      Indigo
    </Tag>
    <Tag variant="solid" colorScheme="violet">
      Violet
    </Tag>
    <Tag variant="solid" colorScheme="purple">
      Purple
    </Tag>
    <Tag variant="solid" colorScheme="fuchsia">
      Fuchsia
    </Tag>
  </Wrap>

  <Wrap gap="md">
    <Tag variant="outline" colorScheme="primary">
      Primary
    </Tag>
    <Tag variant="outline" colorScheme="secondary">
      Secondary
    </Tag>
    <Tag variant="outline" colorScheme="success">
      Success
    </Tag>
    <Tag variant="outline" colorScheme="warning">
      Warning
    </Tag>
    <Tag variant="outline" colorScheme="danger">
      Danger
    </Tag>
    <Tag variant="outline" colorScheme="link">
      Link
    </Tag>
    <Tag variant="outline" colorScheme="gray">
      Gray
    </Tag>
    <Tag variant="outline" colorScheme="neutral">
      Neutral
    </Tag>
    <Tag variant="outline" colorScheme="red">
      Red
    </Tag>
    <Tag variant="outline" colorScheme="rose">
      Rose
    </Tag>
    <Tag variant="outline" colorScheme="pink">
      Pink
    </Tag>
    <Tag variant="outline" colorScheme="orange">
      Orange
    </Tag>
    <Tag variant="outline" colorScheme="amber">
      Amber
    </Tag>
    <Tag variant="outline" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag variant="outline" colorScheme="lime">
      Lime
    </Tag>
    <Tag variant="outline" colorScheme="green">
      Green
    </Tag>
    <Tag variant="outline" colorScheme="emerald">
      Emerald
    </Tag>
    <Tag variant="outline" colorScheme="teal">
      Teal
    </Tag>
    <Tag variant="outline" colorScheme="cyan">
      Cyan
    </Tag>
    <Tag variant="outline" colorScheme="sky">
      Sky
    </Tag>
    <Tag variant="outline" colorScheme="blue">
      Blue
    </Tag>
    <Tag variant="outline" colorScheme="indigo">
      Indigo
    </Tag>
    <Tag variant="outline" colorScheme="violet">
      Violet
    </Tag>
    <Tag variant="outline" colorScheme="purple">
      Purple
    </Tag>
    <Tag variant="outline" colorScheme="fuchsia">
      Fuchsia
    </Tag>
  </Wrap>
</VStack>
Copied!

Add an Icon

To add an icon, set a ReactElement to icon.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <Tag colorScheme="primary" size="sm" leftIcon={<Plus />}>
    Small
  </Tag>
  <Tag colorScheme="secondary" size="md" rightIcon={<Plus />}>
    Medium
  </Tag>
  <Tag colorScheme="warning" size="lg" leftIcon={<Plus />}>
    Large
  </Tag>
</Wrap>
Copied!

Add a Close Button

To add a close button, set onClose.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <Tag colorScheme="primary" rounded="full" onClose={() => {}}>
    Cyan
  </Tag>
  <Tag colorScheme="secondary" rounded="full" onClose={() => {}}>
    Secondary
  </Tag>
  <Tag colorScheme="warning" rounded="full" onClose={() => {}}>
    Warning
  </Tag>
  <Tag colorScheme="danger" rounded="full" onClose={() => {}}>
    Danger
  </Tag>
</Wrap>
Copied!

Disable the Close Button

To disable the close button, set isDisabled to true.

Editable example

<Wrap gap="md" alignItems="flex-start">
  <Tag
    variant="solid"
    colorScheme="primary"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Cyan
  </Tag>
  <Tag
    variant="solid"
    colorScheme="secondary"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Secondary
  </Tag>
  <Tag
    variant="solid"
    colorScheme="warning"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Warning
  </Tag>
  <Tag
    variant="solid"
    colorScheme="danger"
    rounded="full"
    onClose={() => {}}
    isDisabled
  >
    Danger
  </Tag>
</Wrap>
Copied!

Edit this page on GitHub

PreviousData DisplayNextBadge