Status

Visual status indicator with colored dot to show state.

Variants

Default Online Away Busy In a meeting

Base

Class	Description
`.ui-status`	Base class

Variant

Class	Value
`.ui-status--success`	success
`.ui-status--warning`	warning
`.ui-status--danger`	danger
`.ui-status--info`	info

Size

Class	Value
`.ui-status--sm`	sm
`.ui-status--lg`	lg

Pulse

Class	Description
`.ui-status--pulse`	pulse

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-status-size`	`calc(var(--ui-unit) * 1)`	Overall size
`--ui-status-color`	`var(--ui-color-text-muted)`	Text color
`--ui-status-gap`	`calc(var(--ui-unit) * 1)`	Gap between children

Sizes

Small Default Large

<div class="ui-flex ui-gap-4 ui-items-center">
  <span class="ui-status ui-status--success ui-status--sm">
    <span class="ui-status__dot"></span>
Small
  </span>
  <span class="ui-status ui-status--success">
    <span class="ui-status__dot"></span>
Default
  </span>
  <span class="ui-status ui-status--success ui-status--lg">
    <span class="ui-status__dot"></span>
Large
  </span>
</div>

Pulse Animation

Live

<!-- For live or active indicators -->
<span class="ui-status ui-status--success ui-status--pulse">
  <span class="ui-status__dot"></span>
Live
</span>

Dot Only

<div class="ui-flex ui-gap-2">
  <span class="ui-status ui-status--success">
    <span class="ui-status__dot"></span>
  </span>
  <span class="ui-status ui-status--warning">
    <span class="ui-status__dot"></span>
  </span>
  <span class="ui-status ui-status--danger">
    <span class="ui-status__dot"></span>
  </span>
</div>