Color alone never carries the meaning, so give every dot a label unless nearby text already states the status. The label is shown beside the dot with show-label, or kept as the dot’s accessible name and shown in a tooltip. The label is exposed once: as text when it is shown, otherwise as the name of the dot, which has an image role. The tooltip repeats that name visually and adds no description.
Variants
variant picks the color from the theme’s status roles: default for active or informational states, secondary for neutral ones such as paused or offline, and success, warning and destructive for healthy, degraded and failed.
Variants
Default density
Compact density
Restart from the initial state
Show the copyable source
For any other color, set --tp-status-dot-color on the dot or an ancestor; --tp-status-dot-size sets its diameter.
Label beside the dot
With show-label, the label renders as text after the dot. It takes the font and color of its context and wraps when space runs out, with the dot centered on its first line. Here each status is the supporting text of a list row.
Service status
Default density
Compact density
Restart from the initial state
Show the copyable source
Without show-label, the dot stands alone: the label becomes its accessible name and appears in a tooltip on hover and keyboard focus, so the dot joins the tab order. Hover a dot, or press Tab to reach it. Set tooltip="false" for dense layouts where the status is also stated elsewhere: the label stays the name, without a tooltip or a tab stop. Escape closes the tooltip and keeps focus.
When show-label is turned on while the dot has focus, the dot keeps focus until it is left, then leaves the tab order.
Compact column
Default density
Compact density
Restart from the initial state
Show the copyable source
A dot with an empty label is decorative: it is hidden from assistive technology and never focusable.
Motion
motion="pulse" fades the dot out and in; motion="ping" sends a ring out of it. Neither moves the dot, its label or the content around it, and both rest under reduced motion. Keep motion for live or changing states, so it keeps its meaning. Under reduced motion (motion-policy="reduce" on the dot or an ancestor, or the prefers-reduced-motion media feature) the dot rests without a ring.
Pulse and ping
Default density
Compact density
Restart from the initial state
Show the copyable source
Status dot adds no live region. Wrap dots whose changes must be announced in an element with role="status".
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionvariantvariantStatusDotVariant'default'The color of the status, from the theme's status roles; the label, not the color, carries the meaning.labellabelstring''Status text: shown beside the dot, or the dot's accessible name and tooltip.show-labelshowLabelbooleanfalseShows the label beside the dot instead of in a tooltip.tooltiptooltipbooleantruePresents the label in a tooltip while it is not shown.motionmotionStatusDotMotion'none'Looping motion of the dot: none, pulse or ping.
CSS parts
PartDescription::part(status-dot-indicator)The dot, in the variant color.::part(status-dot-label)The label beside the dot, while show-label is set.
CSS custom properties
PropertyDefaultDescription--tp-status-dot-color—Dot color, replacing the variant color.--tp-status-dot-size—Dot diameter.
Related
Components, widgets and patterns that use this one.