---
title: "StatusDot"
description: "A small colored dot that says a status at a glance, optionally pulsing while something is live. Give it a label, visible or for screen readers only, so color is never the only sign."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# StatusDot

## With a label

```tsx
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.

```tsx
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`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/status-dot/status-dot.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/status-dot/index.mdx