Status Dot
A status shape with its label, for lists and headers.
Ready
<StatusDot status="success" label="Ready" />Props
status
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/status-dot.jsonThe CLI writes components/ikada/status-dot.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Status Glyph. Or take it from the package: import { StatusDot } from "@sproutboat/ikada";
Usage
import { StatusDot } from "@/components/ikada/status-dot";
<StatusDot status="success" label="Ready" />Examples
ReadyDNS pendingBuild failedBuildingPaused
<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 90%
<StatusDot tone="success" live label="Live 90%" />Building
<StatusDot tone="info" pulse label="Building" />Deployed
<StatusDot tone="success" sprout label="Deployed" />Props
| 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. |
| labelrequired | 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`. |
Also takes every prop of Omit<ComponentProps<"span">, "children">.
Source: src/components/status-dot.tsx