UnreviewedAny data-* attribute is forwarded to the rendered element.
Any aria-* attribute is forwarded to the rendered element.
Optional UnreviewedlabelA short "key" shown before the value. When paired with value it
renders bold (weight 600), same color. On its own (no value) it's
treated as the tag's primary text and keeps the default styling.
Optional UnreviewedvalueThe tag's primary text — a status, count, version, duration, etc. Rendered in the default color and weight, with no divider from the label; the color + weight contrast does the separating.
Optional UnreviewedtoneSemantic tone, or any literal CSS color ('#ff1493', 'rebeccapurple')
for a one-off custom tone. Each tone renders the secondary tag style:
--text-3-{tone} text over an alpha tint of the tone's hue (fill + a
slightly stronger hairline border). A custom color is tinted the same
way, with the text deepened to a readable foreground. 'neutral' (the
default) is the gray tag — the same as omitting tone.
Optional UnreviewedpriorityEmphasis level. secondary (the default) is the subtle alpha-tint
fill; primary is a solid fill with white text; tertiary is a
transparent outline. Omitting it (or passing 'secondary') renders
the default and emits no DOM attribute.
Optional UnreviewedsizeSize variant. small = 16px tall, medium = 20px, large = 24px
(matching Button). Omit the attribute or pass 'medium' for the
default — both render identically and emit no DOM attribute.
Optional UnreviewedallcapsRender in all-caps instead of the default normal (mixed) case.
Optional UnreviewediconLeading icon shape. Sits flush before the label, scaled to the pill.
Optional UnreviewediconTrailing icon shape. Renders last, after the value.
Optional UnreviewedclassCSS class on the component's root element (merged with the component's own
classes). Use it directly for layout and positioning — grid/flex placement,
margins, alignment — rather than wrapping the component in a <div>/<span>.
Optional UnreviewedstyleInline styles on the component's root element. Set layout/positioning here
(or via className) directly on the component instead of adding a wrapper.
Optional UnreviewedchildrenChild elements. When provided, replaces the component's default label/content.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute — native browser tooltip on hover.
Optional UnreviewedslotAssigns the element to a named <slot> of a parent web component (e.g.
slot="header" inside a <Card>, slot="footer" inside a <Dialog>).
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
Common props for JSX component wrappers.