Tag

Tag represents an attribute, filter or selected object; it can be dismissible or interactive.

A static Tag only displays content. A dismissible Tag is a button: click it or press Delete or Backspace to remove it. InteractionTag splits the main action from a separate X button. TagGroup lays out tags, supports arrow-key navigation and moves focus to the neighboring tag when one is removed.

DesignEventsAlex ChenNew

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Tag, InteractionTag, TagGroup } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

FilledOutlineBrand

Appearance

filled (default), outline, brand.

MediumSmallExtra smallCircular

Size & shape

medium (32px), small (24px), extra-small (20px); rounded or circular.

Maria GarciaSam LeeSoftware engineer

Avatar & secondaryText

media places an Avatar flush with the edge; secondaryText adds a second line (size medium).

Dismissible in a TagGroup

Click a tag or press Delete/Backspace to remove it; focus moves to the next tag.

InteractionTag

The main action and the X button are separate focus stops.

Usage

Keep tag labels short (1–3 words); long labels are truncated with …
Use TagGroup so tags wrap neatly and get keyboard navigation.
Use the brand appearance sparingly, only for tags that need emphasis.

Don't

Don't use Tag instead of Button for the main action on a page.
Don't use Tag to report status (success, error). Use Badge.
Don't mix appearances in one group without a reason.

Props

Prop · Type	Default	Description
appearance"filled" \| "outline" \| "brand"	Default: "filled"	Tag style.
size"extra-small" \| "small" \| "medium"	Default: "medium"	Height 20 / 24 / 32px.
shape"rounded" \| "circular"	Default: "rounded"	Corner rounding.
icon / mediaReactNode	Default: —	Icon or Avatar before the label.
secondaryTextReactNode	Default: —	Second line below the label.
dismissible / onDismissboolean / (event, value) => void	Default: —	Turns the tag into a remove button.
valuestring	Default: —	Identifier; TagGroup.onDismiss receives this value.
TagGroup.onDismiss(value: string) => void	Default: —	Removes a tag from the group and manages focus.
TagGroup.size / appearance / disabled—	Default: —	Defaults for every tag in the group.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.tag

Key · Type	Default (English)	messagesVi
dismissstring Mô tả hành động gỡ (Tag dismissible) và nhãn nút X khi nhãn tag không phải chuỗi.	Default (English)`"Remove"`	messagesVi`"Gỡ"`
dismissNamed(name: string) => string Nhãn nút X của InteractionTag khi nhãn tag là chuỗi.	Default (English)(name) => `Remove ${name}`	messagesVi(name) => `Gỡ ${name}`