---
title: "Status Indicator"
description: "A presence dot anchored to an avatar, with online, idle, do-not-disturb, offline and streaming states."
---

Presence, encoded in shape as well as colour: idle is a crescent, do-not-disturb is a bar, offline is a hollow ring. That is deliberate — the states stay distinguishable in greyscale, in a screenshot, and to a reader who cannot tell green from red.

_Live example of Status Indicator — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add status-indicator
```

npm dependencies: class-variance-authority. Registry dependencies, installed with it: avatar.

Files written — React: components/ui/status-indicator.tsx. Vue: components/ui/status-indicator/StatusIndicator.vue, components/ui/status-indicator/StatusDot.vue, components/ui/status-indicator/index.ts.

## Usage

React:

```tsx
import { StatusIndicator } from "@/components/ui/status-indicator"
```

Vue:

```ts
import { StatusIndicator, StatusDot } from "@/components/ui/status-indicator"
```

## API reference

**`StatusDot`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"online" \| "idle" \| "dnd" \| "offline" \| "streaming"` | `"offline"` | The presence state. |

**`StatusIndicator`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"online" \| "idle" \| "dnd" \| "offline" \| "streaming"` | `"offline"` | Passed through to the dot. |
| `label` | `string` | — | Text beside the dot. Also the accessible name when present. |

Every part also accepts the native attributes of the element it renders, and a `className` that is merged rather than replaced.

## Accessibility

The dot carries `role="status"` and an `aria-label` naming the state, so it is never colour alone. The online state has a soft pulse, which is the one animation in the library; it is behind `prefers-reduced-motion` and the state is legible without it.

## Tokens

Status Indicator reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.