Tag

Used for categorizing or labeling content

Plain Tag

Closable Tag

Usage

import { Tag } from "chakra-ui-solid";

<Tag.Root>
  <Tag.Label>Tag here</Tag.Label>
</Tag.Root>

If you prefer a closed component composition, check out the snippet below.

Examples

Icon

Use the Tag.StartElement and Tag.EndElement components to add an icon to the start or end of the tag

Tag 1

Top Rated

Tag 2

Variants

Use the variant prop to change the appearance of the tag.

Gray

Sizes

Use the size prop to change the size of the tag.

Gray

Colors

Use the colorPalette prop to change the color of the tag.

gray

Content

red

Content

green

Content

blue

Content

teal

Content

pink

Content

purple

Content

cyan

Content

orange

Content

yellow

Content

Closable

Use the Tag.CloseTrigger within the Tag.EndElement to make the tag closable.

Tag 1

Tag 2

Overflow

Use the maxWidth prop to control the maximum width of the tag. When the content exceeds this width, it will be truncated with an ellipsis.

This is particularly useful when dealing with dynamic or user-generated content where the length might vary.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam molestias, laboriosam, quod, quia quidem quae voluptatem natus exercitationem autem quibusdam

Avatar

The tag component has been designed to work well with the Avatar component.

Note: Set the avatar size to full to ensure it’s sized correctly.

Emily sm

Emily md

Emily lg

Emily xl

Render as button

Use the render prop to render the tag as a button.

Closed Component

Here’s how to setup the Tag for a closed component composition.

Plain

Closable

Props

Root

TagRootProps
Prop	Default	Type
`size`	`'md'`	`ConditionalValue<'sm' \| 'md' \| 'lg' \| 'xl' \| PresetVariant<'tag', 'size'>>` The label's type scale, the tag's minimum height, and the size of a start or end element.
`variant`	`'surface'`	`ConditionalValue<'subtle' \| 'solid' \| 'outline' \| 'surface' \| PresetVariant<'tag', 'variant'>>` How much of the palette the tag spends — `solid` fills it, `subtle` tints it, `outline` is a ring alone, and `surface` is the tint plus the ring.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.