Elements

Tag

A small soft/solid pill for labeling content, with optional leading/trailing icons.

html
<UiTag />

Color

color is the color theme of the Tag.

primarysecondarysuccesswarningerrorinfopendingneutral

Variant

variant sets the tag's weight. soft is a lightly tinted background with coloured text — the everyday label. solid fills the background instead, for a tag that has to stand out from a row of them.

soft

primarysecondarysuccesswarningerrorinfopendingneutral

solid

primarysecondarysuccesswarningerrorinfopendingneutral

Icon left

iconLeft puts a glyph before the label, which is the place for one that classifies the tag — a branch icon on a version, a person on an owner.

FeaturedDone

Icon right

iconRight is for the affordance that follows the label — a chevron on a filter chip, a dismiss cross on a removable one.

NextExpired

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
"primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral"
'neutral'
The color theme of the Tag.
"solid" | "soft"
'soft'
The visual style of the Tag.
string
Icon displayed before the content.
string
Icon displayed after the content.

Slots

Slot
default