Tag
Tag is a component used to categorize or organize items using keywords that describe them.
Import
import { Tag } from "@yamada-ui/react"
Usage
Editable example
<Tag>Tag</Tag>
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>
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>
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>
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>
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>
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>
Edit this page on GitHub