# Status dot (goodtabs UI)

A state mark with its word beside it, so colour never carries the state.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/status-dot.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/status-dot`

## Usage

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

<StatusDot status="active" label="Deployed" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| status | `"active" | "idle" | "paused" | "failed"` | `"active"` | The state. Picks the shape and the default label. |
| label | `string` |  | Replaces the default label. |

## When to use

- Rows of services, builds, members or domains where a state matters
- Anywhere a coloured dot would be the only signal

## When not to use

- A count or a category: use a badge
- Long state descriptions: put them in the row text

## Notes for agents

- The label is always rendered; never hide it
- Only the active mark uses --brand; the rest are foreground tones, told apart by shape
- Extends a span, so className passes through

Docs: https://ui.goodtabs.co/components/status-dot