# Badge

A short status or label in a soft tinted pill.

Source page: https://sproutboat.com/ikada/components/badge

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

<Badge tone="success" dot>
  Live
</Badge>
```
## Examples
### Tones
The text carries the meaning; the tone and the shape reinforce it.
```tsx
<Badge>neutral</Badge>
<Badge tone="success">success</Badge>
<Badge tone="warning">warning</Badge>
<Badge tone="danger">danger</Badge>
<Badge tone="info">info</Badge>
```
### With a status shape
Each tone has its own glyph, so colour is never the only signal.
```tsx
<Badge dot>neutral</Badge>
<Badge tone="success" dot>success</Badge>
<Badge tone="warning" dot>warning</Badge>
<Badge tone="danger" dot>danger</Badge>
<Badge tone="info" dot>info</Badge>
```
### Live and sprout
Live is the bullseye for a sprout serving traffic; sprout animates the dot in once, for something just created.
```tsx
<Badge tone="success" dot live>Live</Badge>
<Badge tone="success" dot sprout>Ready</Badge>
```
## Props
### BadgeProps
Also takes every prop of `ComponentProps<"span">`.
| Prop | Type | Description |
| --- | --- | --- |
| tone? | `Status` | Status that sets the colour and the glyph. Default neutral. |
| dot? | `boolean` | Adds a leading status shape. The text is always the primary signal. Default `false`. |
| live? | `boolean` | With tone="success" and a dot: the bullseye shape for "Live" (serving traffic) instead of the "Ready" circle. Default `false`. |
| sprout? | `boolean` | With tone="success" and a dot: the dot sprouts on mount, for something just created or just succeeded. Default `false`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/badge.tsx