ComponentsDisplay

Badge

A short label for status or counts. Never color alone.

Playground

Paid

<Badge color="success" hasDot>Paid</Badge>

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Badge } from "junco";

<Badge color="success" hasDot>Paid</Badge>
<Badge variant="outline" color="danger" hasDot>Failed</Badge>

neutralprimarysuccesswarningdanger

Outline badges use status text tokens that pass 4.5:1 on the page. The dot plus the word carry the meaning, not the color.

PaidPendingFailedIn reviewDraft

variant: Filled or outlined.; "solid" | "outline"; Default: "solid"
color: Meaning. Always pair it with words.; "neutral" | "primary" | "success" | "warning" | "danger"; Default: "neutral"
hasDot: Adds a leading dot in the current color.; boolean; Default: false

Prop	Type	Default
`variant` Filled or outlined.	`"solid" \| "outline"`	`"solid"`
`color` Meaning. Always pair it with words.	`"neutral" \| "primary" \| "success" \| "warning" \| "danger"`	`"neutral"`
`hasDot` Adds a leading dot in the current color.	`boolean`	`false`

Status is never color alone: the badge text says what the color means.
Every color pair is checked at 4.5:1 contrast in light and dark by the token tests.
For counts that change live, wrap them in an aria-live region so updates are announced.