Status Glyph
A 10px shape per status (circle, bullseye for live, triangle, cross, half ring, square).
<StatusGlyph status="success" />Props
status
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/status-glyph.jsonThe CLI writes components/ikada/status-glyph.tsx and merges the ikada theme into your CSS. Or take it from the package: import { StatusGlyph } from "@sproutboat/ikada";
Usage
import { StatusGlyph } from "@/components/ikada/status-glyph";
<StatusGlyph status="success" />Examples
<StatusGlyph tone="success" />
<StatusGlyph tone="warning" />
<StatusGlyph tone="danger" />
<StatusGlyph tone="info" />
<StatusGlyph tone="neutral" /><StatusGlyph tone="success" live /><StatusGlyph tone="info" pulse />
<StatusGlyph tone="warning" pulse /><StatusGlyph tone="success" sprout />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. |
| live | boolean | Success that is serving traffic ("Live"): a bullseye instead of the solid "Ready" circle. Default `false`. |
| pulse | boolean | Pulses (a fade) while in progress; the building ring and its wedge spin when motion is allowed. Default `false`. |
| sprout | boolean | Success or creation just happened: on mount the shape grows up from its base and sends one ring out. Only applies to success. Under reduced motion it fades in place. Default `false`. |
Also takes every prop of Omit<ComponentProps<"span">, "children">.
Source: src/components/status-glyph.tsx