# Status Dot

A status shape with its label, for lists and headers.

Source page: https://sproutboat.com/ikada/components/status-dot

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/status-dot.json
```
Or from the package: `import { StatusDot } from "@sproutboat/ikada";`
## Usage
```tsx
import { StatusDot } from "@/components/ikada/status-dot";

<StatusDot status="success" label="Ready" />
```
## Examples
### Statuses
Each status has its own shape, so colour is never the only signal.
```tsx
<StatusDot tone="success" label="Ready" />
<StatusDot tone="warning" label="DNS pending" />
<StatusDot tone="danger" label="Build failed" />
<StatusDot tone="info" label="Building" />
<StatusDot tone="neutral" label="Paused" />
```
### Live
Success that is serving traffic gets its own bullseye, apart from the plain Ready circle.
```tsx
<StatusDot tone="success" live label="Live 90%" />
```
### Pulse
For in-progress states. The ring stops spinning when motion is reduced.
```tsx
<StatusDot tone="info" pulse label="Building" />
```
### Sprout
Success that just happened: the shape grows up and sends one ring out.
```tsx
<StatusDot tone="success" sprout label="Deployed" />
```
### Hidden label
Dense tables keep the label for screen readers and show only the shape.
```tsx
<StatusDot tone="danger" hideLabel label="Build failed" />
```
## Props
### StatusDotProps
Also takes every prop of `Omit<ComponentProps<"span">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| tone? | `Status` | Which status: sets the shape and the colour. Default neutral. |
| status? | `Status` | @deprecated Use `tone`; removed in 0.3.0. |
| label | `string` | Required: a dot is never the only signal. |
| hideLabel? | `boolean` | Keeps the label for screen readers and hides it visually (dense tables). Default `false`. |
| live? | `boolean` | Success that is serving traffic ("Live 90%"): its own bullseye shape, not the "Ready" circle. Default `false`. |
| pulse? | `boolean` | Pulses for in-progress states; the ring stops spinning when motion is reduced. Default `false`. |
| sprout? | `boolean` | Success that just happened: the shape sprouts on mount (grows up and sends one ring out). Default `false`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/status-dot.tsx