# Status Glyph

A 10px shape per status (circle, bullseye for live, triangle, cross, half ring, square).

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

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

<StatusGlyph status="success" />
```
## Examples
### Shapes
Circle, triangle, cross, half ring and square. Decorative: always pair a glyph with a label.
```tsx
<StatusGlyph tone="success" />
<StatusGlyph tone="warning" />
<StatusGlyph tone="danger" />
<StatusGlyph tone="info" />
<StatusGlyph tone="neutral" />
```
### Live
A bullseye for success that is serving traffic.
```tsx
<StatusGlyph tone="success" live />
```
### Pulse
While in progress. The half ring spins when motion is allowed.
```tsx
<StatusGlyph tone="info" pulse />
<StatusGlyph tone="warning" pulse />
```
### Sprout
Grows up from its base and sends one ring out. Under reduced motion it fades in place.
```tsx
<StatusGlyph tone="success" sprout />
```
## Props
### StatusGlyphProps
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. |
| 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`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/status-glyph.tsx