Badge
A short status or label in a soft tinted pill.
Live
<Badge tone="success" dot>
Live
</Badge>Props
tone
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/badge.jsonThe CLI writes components/ikada/badge.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 { Badge } from "@sproutboat/ikada";
Usage
import { Badge } from "@/components/ikada/badge";
<Badge tone="success" dot>
Live
</Badge>Examples
neutralsuccesswarningdangerinfo
<Badge>neutral</Badge>
<Badge tone="success">success</Badge>
<Badge tone="warning">warning</Badge>
<Badge tone="danger">danger</Badge>
<Badge tone="info">info</Badge>neutralsuccesswarningdangerinfo
<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>LiveReady
<Badge tone="success" dot live>Live</Badge>
<Badge tone="success" dot sprout>Ready</Badge>Props
| 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`. |
Also takes every prop of ComponentProps<"span">.
Source: src/components/badge.tsx