Elements
Badge
A small count or status indicator anchored to a corner of its content, or standalone.
<UiBadge />Text
text is the count or short label inside the badge. Without it the badge collapses to a bare dot, which is the shape for “something is here” when the number doesn't matter.
Without text, the badge renders as a small dot; setting status overrides color and swaps in a presence-specific shape (moon for away, dash for busy, x for dnd).
Color
color is the color of the Badge when no status is set.
Status
status is a presence status that overrides color and renders a corresponding indicator shape. Ignored when text is set.
Position
position is the corner of the wrapped content the Badge is anchored to. Ignored when standalone is true.
Inset
inset pulls the Badge inward so it sits inside the wrapped content's edge instead of straddling it.
Standalone
standalone drops the wrapper entirely, so the indicator can sit inline in a list row or a table cell.
standalone renders just the indicator with no wrapped content — use it for a bare status dot or count.
Ring
ring is the background color the separation ring blends into. Match this to the surface the Badge is placed on (e.g. a Card's background) so the ring reads as a seamless cutout rather than a visible border.
Match ring to the surface the badge sits on (e.g. ring="foreground" inside a Card) so the separation ring reads as a cutout rather than a visible border.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
number | string"primary" | "secondary" | "success" | "warning" | "error" | "info" | "pending" | "neutral"'primary'"online" | "away" | "busy" | "dnd" | "offline""top-right" | "bottom-right" | "top-left" | "bottom-left"'top-right'boolean"background" | "foreground" | "elevated" | "highlighted" | "none"'background'Slots
default