Status dot

<oblyx-status-dot> is a fixed-size, color-only presence or severity indicator for inline use: a table row's status column, a list item's leading indicator, a compact spot next to a name. Both variant and label are required; a status dot has no visible text of its own to fall back on for an accessible name.

Basic status dot

HTML

Kotlin

<oblyx-status-dot variant="success" label="Online"></oblyx-status-dot>

oblyxStatusDot(variant = OblyxStatusDotVariant.SUCCESS, label = "Online")

Not badge, and not avatar's own status dot

Badge's text content is mandatory, a status dot's never is: reach for badge when the label itself needs to be visible, and status dot when a color alone is the whole signal and the meaning is carried in label for assistive tech only. oblyx-avatar-status-dot is a separate element again, sized by its ancestor avatar's own size rather than fixed like this one; use that one only when composing onto an avatar.

Variant

Five semantic colors. There is no default; pick the one that matches the state being shown.

Status dot variants

HTML

Kotlin

<oblyx-status-dot variant="success" label="Online"></oblyx-status-dot>
<oblyx-status-dot variant="warning" label="Degraded"></oblyx-status-dot>
<oblyx-status-dot variant="error" label="Offline"></oblyx-status-dot>
<oblyx-status-dot variant="accent" label="New"></oblyx-status-dot>
<oblyx-status-dot variant="neutral" label="Unknown"></oblyx-status-dot>

oblyxStatusDot(variant = OblyxStatusDotVariant.SUCCESS, label = "Online")
oblyxStatusDot(variant = OblyxStatusDotVariant.WARNING, label = "Degraded")
oblyxStatusDot(variant = OblyxStatusDotVariant.ERROR, label = "Offline")
oblyxStatusDot(variant = OblyxStatusDotVariant.ACCENT, label = "New")
oblyxStatusDot(variant = OblyxStatusDotVariant.NEUTRAL, label = "Unknown")

Inline placement

A status dot carries no layout or spacing of its own beyond its fixed size: place it inline next to text with ordinary flex or grid CSS, the same as any other small inline element.

Status dot next to a name

Priya Patel

HTML

Kotlin

<p style="display: flex; align-items: center; gap: var(--ox-spacing-2);">
  <oblyx-status-dot variant="success" label="Online"></oblyx-status-dot>
  Priya Patel
</p>

p {
  style = "display: flex; align-items: center; gap: var(--ox-spacing-2);"
  oblyxStatusDot(variant = OblyxStatusDotVariant.SUCCESS, label = "Online")
  +"Priya Patel"
}

Pulsing

pulsing adds an animated pulse, for a status that's actively changing right now rather than settled, such as a live call or an in-progress deploy. It respects prefers-reduced-motion.

Pulsing status dot

HTML

Kotlin

<oblyx-status-dot variant="error" label="Live" pulsing></oblyx-status-dot>

oblyxStatusDot(variant = OblyxStatusDotVariant.ERROR, label = "Live", pulsing = true)

Tooltip

tooltip sets the native title attribute, shown on hover. It's a supplement to label, not a replacement: title is not reliably exposed to assistive tech or reachable by touch or keyboard, so anything a user must be able to read belongs in label instead.

Status dot with a hover tooltip

HTML

Kotlin

<oblyx-status-dot variant="warning" label="Degraded" tooltip="Elevated error rate since 14:02"></oblyx-status-dot>

oblyxStatusDot(
  variant = OblyxStatusDotVariant.WARNING,
  label = "Degraded",
  tooltip = "Elevated error rate since 14:02",
)

Reference

`<oblyx-status-dot>`

Attribute	Type	Default	Description
`variant`	`successwarningerroraccentneutral`	–	Semantic color. Required.
`label`	`string \| undefined`	–	Accessible name, for example "Online" or "Failed". Required; this element has no visible text of its own to fall back on.
`pulsing`	`boolean`	`false`	Animated pulse, respecting prefers-reduced-motion.
`tooltip`	`string \| undefined`	`undefined`	Native `title` text shown on hover.