# Status Dot

Presence and live indicator where away, offline and do-not-disturb have their own shapes, not just colours. Comes as a plain dot, a dot with a cut-out edge for avatars, or a labelled pill.

> Composed · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add status-dot
```

## Import

```tsx
import { StatusDot } from "@/components/ui/status-dot/status-dot";
```

## Variants

- `live` — Live: `npx @lumioui/cli add status-dot-live`
- `presence` — Presence: `npx @lumioui/cli add status-dot-presence`
- `system` — System status: `npx @lumioui/cli add status-dot-system`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `status?` | `PresenceStatus` | Presence or live state. Default "online". |
| `size?` | `keyof typeof DIAMETER` | Dot diameter — xs 8 · sm 10 · md 12 · lg 14. Default "sm". |
| `variant?` | `"dot" | "pill"` | "dot" renders the bare indicator; "pill" pairs it with a text label. Default "dot". |
| `label?` | `string` | Pill text. Defaults to the status name ("Active", "Away", "Live"…). |
| `ring?` | `boolean` | Surface-coloured cut-out ring so the dot reads as punched out of an  avatar or thumbnail. Default false. |
| `ringClassName?` | `string` | Ring classes — border AND fill matching the surface the dot sits on  (the fill shows through hollow away/offline rings). Default "border-card bg-card". |
| `animate?` | `boolean` | Run the live breath. Defaults to true for `live`; ignored for other statuses.  Set false when the row is off-screen or the stream is paused. |
| `glow?` | `boolean` | Status as light: online gets a faint halo of its own light, away and  offline dim to unlit filaments. Default false. |
| `accessibilityLabel?` | `string` | Screen-reader label. Defaults to the status label ("Active"). |
| `className?` | `string` | — |
| `textClassName?` | `string` | Extra classes for the pill label. |

Source: https://lumioui.com/components/status-dot