# StatusDot

> A small coloured dot that names a record's state beside its label, plus a dot cluster that summarises a set of states as `n/N`.

```ts
import { StatusDot } from "@sdxc/ui";
```

Renders a dot and its label. With a label the dot is `aria-hidden`, since the text already
names the state; without one the host becomes `role="img"` and its `aria-label` is the name.

## Examples

```tsx
<StatusDot color="success">{t("monitor.up")}</StatusDot>
```

```tsx
<StatusDot color="brand" pulse>{t("deploy.building")}</StatusDot>
```

```tsx
<StatusDot color="danger" aria-label={t("monitor.down")} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic role of the state. Defaults to DEFAULT_COLOR. |
| `pulse?` | `boolean` | Marks a state still in progress (queued, deploying, checking): the dot pulses until the state settles, and holds still for visitors who prefer reduced motion. |
| `children?` | `RemixNode` | The state's name, such as "Up" or "Deploying". |

Also accepts everything in `TagProps<"span">`.


### StatusDot.Summary

Renders a compact summary of several states, overlapping dots followed by `n/N`, for a filter trigger that shows which statuses are on.

| Prop | Type | Description |
| --- | --- | --- |
| `colors?` | `Color[]` | One dot per chosen state, drawn overlapping in this order; an empty list shows `n/N` alone. |
| `count` | `number` | How many states are chosen, the `n` of `n/N`. |
| `total` | `number` | How many states exist, the `N` of `n/N`. |
| `label` | `string` | What the summary announces in full, such as "4 of 5 statuses shown". |

Also accepts everything in `TagProps<"span">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | The role a state reads in: up or ok is `success`, degraded or pending is `warning`, down or failed is `danger`, paused or unknown is `neutral`, in progress is `brand`. |