Compact pill / chip for status, labels, and metadata.
Renders an <a-tag> styled tag (no JS, no shadow DOM) — color and size
come entirely from attributes. Content is composed from icon, label,
value, and iconTrailing (like <Button>): value is the primary
text (default styling) and label, when paired with a value, renders as
a bold "key" before it (same color, no divider). Tabular figures are
always on, so counts / versions / timers don't reflow. For an arbitrary
multi-part tag, pass children instead — each segment after the first
gets a hairline divider (the label + value pair is the no-divider
exception).
Requires @antadesign/anta/elements to be imported (client-side only)
so the CSS ships with the page.
Styling notes (a-tag.css ships comment-free):
Sizing is intrinsic — no fixed height, like <a-button>: height falls
out of line-height + padding-block + the 0.5px border (the base
1.5px block padding compensates the half-pixel border to keep the pill
at 20px), so text is never clipped and the padding tokens can be
retuned freely. An edge icon trims ~2px off its side's padding
(optical), and icons scale to --tag-icon-size.
Color comes from the theme-aware semantic tokens and light-dark(); the
hairline border and the segment divider both
derive from --tag-text, so every tone gets a matching edge. A lone
label is dropped into <a-tag-value> by this wrapper so it keeps the
default weight; <a-tag-label> only renders as the bold key before a
value (weight contrast does the separating — no divider).
Segmented children: raw children (not the structured label/value/icon
elements) get a hairline left border per segment after the first; the
flex gap sits left of the border and padding-left balances it.
Custom tones (any non-named tone) keep the source hue with
lightness/chroma pinned via oklch relative color. light-dark() selects
the matching ramp from the nearest inherited color scheme. The
wrapper writes --tag-tone-source inline; a typed attr() fallback
picks up raw <a-tag tone="…"> on Chrome 133+/Safari 18.2+.
allcaps switches on the uppercase transform; tabular figures stay on.
Each size steps down 1px under allcaps
(uppercase reads larger than mixed case at the same px), with height
unchanged.
Compact pill / chip for status, labels, and metadata.
Renders an
<a-tag>styled tag (no JS, no shadow DOM) — color and size come entirely from attributes. Content is composed fromicon,label,value, andiconTrailing(like<Button>):valueis the primary text (default styling) andlabel, when paired with a value, renders as a bold "key" before it (same color, no divider). Tabular figures are always on, so counts / versions / timers don't reflow. For an arbitrary multi-part tag, passchildreninstead — each segment after the first gets a hairline divider (thelabel+valuepair is the no-divider exception).Requires
@antadesign/anta/elementsto be imported (client-side only) so the CSS ships with the page.Styling notes (
a-tag.cssships comment-free):<a-button>: height falls out ofline-height+padding-block+ the 0.5px border (the base 1.5px block padding compensates the half-pixel border to keep the pill at 20px), so text is never clipped and the padding tokens can be retuned freely. An edge icon trims ~2px off its side's padding (optical), and icons scale to--tag-icon-size.light-dark(); the hairline border and the segment divider both derive from--tag-text, so every tone gets a matching edge. A lonelabelis dropped into<a-tag-value>by this wrapper so it keeps the default weight;<a-tag-label>only renders as the bold key before a value (weight contrast does the separating — no divider).gapsits left of the border andpadding-leftbalances it.tone) keep the source hue with lightness/chroma pinned via oklch relative color.light-dark()selects the matching ramp from the nearest inherited color scheme. The wrapper writes--tag-tone-sourceinline; a typedattr()fallback picks up raw<a-tag tone="…">on Chrome 133+/Safari 18.2+.allcapsswitches on the uppercase transform; tabular figures stay on. Each size steps down 1px underallcaps(uppercase reads larger than mixed case at the same px), with height unchanged.