Tag
The Tag component is a small, interactive label used to categorize, filter, or display metadata. It supports actions like dismissal and selection, helping users organize and manage content efficiently.
Variants
Neutral (default), brand, success, danger, and warning.
Sizes
Three sizes from sm (default) to lg. Each adjusts padding, gap, radius, and font size.
Types
Fill (default) with colored background, dash with dashed border, emphasis with lighter background, and ghost with no background.
Ghost
Ghost tags keep white text — only icons and dots take the variant color. Useful for subtle labeling with a colored accent.
With Dot
Adds a status indicator dot. Color matches the variant.
With Icon
Place icons before the label. Icons scale automatically based on the tag size.
Dismissible
Adds a dismiss button. Renders a default X icon and accepts a custom onClick handler.