StatusDot | Arbol UI

Language

Appearance

With a label

Live: 3 calls in progress
WhatsApp connected
Number pending verification
Calendar disconnected
Paused

import { StatusDot } from '@arbol-ai/ui';

<ul className="space-y-2 text-sm">
  <li>
    <StatusDot label="Live: 3 calls in progress" pulse tone="success" />
  </li>
  <li>
    <StatusDot label="WhatsApp connected" tone="brand" />
  </li>
  <li>
    <StatusDot label="Number pending verification" tone="warning" />
  </li>
  <li>
    <StatusDot label="Calendar disconnected" tone="danger" />
  </li>
  <li>
    <StatusDot label="Paused" />
  </li>
</ul>

Label for screen readers only

When the dot stands alone, its label is still read.

Mónica, front desk agentOnline

import { StatusDot } from '@arbol-ai/ui';

<p className="flex items-center gap-2 text-sm font-medium">
  Mónica, front desk agent
  <StatusDot hideLabel label="Online" tone="success" />
</p>

Source

The examples above are src/components/status-dot/status-dot.examples.tsx, which the library’s tests render too.