Tag

Tag is a compact label that can convey status, category, or an actionable item.

When to use

• Use a Tag to surface brief contextual information, such as a category name or a status label.
• Use a Tag when you need a removable label; enable the Close prop to provide a dismissal action.
• Use the Validation variants to communicate feedback states (error, success, warning, etc.).

When not to use

• Don't use a Tag as the primary means of delivering essential content; supplement it with regular text.
• Don't rely on a Tag alone to indicate interactivity without the Close or hover/pressed states.

Anatomy / variants

Variant	Description	When to use
Size	Controls the physical dimensions of the Tag.	Choose Xsmall for very tight spaces, Small for modest UI, Medium for standard use, and Large when the Tag should stand out.
State	Defines the interactive visual state.	Use Default for static tags, Hover and Pressed for interactive tags, Focused when keyboard navigation is expected, and Disabled when the Tag is non‑interactive.
Validation	Applies a visual style that reflects status.	Use Filled for the regular appearance, Neutral when no status is needed, Error for validation errors, Success for positive outcomes, Warning for cautionary messages, and Info for informational cues.

Props / API

Prop	Type	Default	Description
leading	boolean	true	Shows a leading visual cue (e.g., an icon) before the label.
tailing	boolean	true	Shows a trailing visual cue after the label.
close	boolean	true	Renders a dismiss button that allows the user to remove the Tag.
size	variant	"Large"	Sets the Tag’s size; options are Xsmall, Small, Medium, Large.
state	variant	"Default"	Sets the interaction state; options are Default, Hover, Pressed, Disabled, Focus.
validation	variant	"Filled"	Sets the validation style; options are Filled, Neutral, Error, Success, Warning, Info.

Accessibility

• Provide an accessible name for the close button (e.g., aria-label="Remove tag").
• Ensure text‑foreground contrast meets at least a 4.5:1 ratio against the background in every validation state.
• Do not use color alone to convey meaning; pair validation variants with text or icons.
• When the Tag is disabled, remove it from the tab order and announce its disabled status with aria-disabled="true".

Changelog

• 2026-06-29 — Initial doc generated from Figma.