Badge
A small inline label for status, counts, or categorisation.
Usage
import { Badge } from '@epilot/spark-ui/badge'<Badge>New</Badge>A bare <Badge> is a quiet, low-emphasis neutral gray chip, independent of the
accent. Use the color and styleVariant props to opt a badge into colour and
emphasis; the ambient theming knobs below (data-style cascading from an ancestor,
<Theme accentColor>) still work.
Examples
Styles
The unstyled badge is neutral gray. Set the styleVariant prop to solid, soft,
surface, ghost, or outline to bring in the accent on a single badge. This
is the sanctioned per-badge way to set the style. An ambient data-style on an ancestor
still cascades to badges that don't set their own styleVariant.
High contrast
<Theme highContrast> (or the raw data-high-contrast attribute) deepens the
ink of any style (and the fill of solid) for stronger legibility.
Colors
Set the color prop to accent, neutral, success, warning, or danger to
recolour a badge. When color is set without styleVariant, the badge defaults to
soft (Badge is a display component, so a look with no explicit style stays
low-emphasis). Wrapping in <Theme accentColor="…"> still works for arbitrary accent
colours outside this fixed set, and a className override still wins over the base
fill via tailwind-merge.
As a count indicator
API Reference
| Prop | Type | Default |
|---|---|---|
styleVariant | 'solid' | 'soft' | 'surface' | 'ghost' | 'outline' | none (soft once color or styleVariant is set) |
color | 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | none (neutral gray until color or styleVariant is set) |
className | string | — |
children | React.ReactNode | — |
The component forwards all span HTML attributes via React.HTMLAttributes<HTMLSpanElement>,
and a ref to the underlying <span>. It is style-aware: it reads the ambient
data-style / data-high-contrast / accent theming knobs.