Badge

Status indicator pill component supporting semantic color schemes and control radius (--radius-lg).

// Plain markup
import { Badge } from "@shavin/ui";

Colors

AccentSuccessWarningDangerNeutral

Component Source

<Badge color="accent">Accent</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="neutral">Neutral</Badge>

Sizes

SmallMedium

Component Source

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

Radius — default follows the theme, override is fixed

NoneSmallMediumLargeFullInherit (default)

Component Source

{/* default: radius="inherit" — tracks the Configurator's Radius control */}
<Badge>Inherit</Badge>
{/* explicit values are fixed regardless of that control */}
<Badge radius="none">None</Badge>
<Badge radius="full">Full (pill)</Badge>

In context

Netflix subscriptionDue tomorrow

Car EMIPaid

Component Source

<span>Netflix subscription</span>
<Badge color="warning">Due tomorrow</Badge>

Props

Prop	Type	Default	Description
color	"neutral" \| "accent" \| "success" \| "warning" \| "danger"	—	Backward compatible color prop. Maps to tone.
icon	React.ReactNode	—	Optional icon node rendered before label.
variant	"surface" \| "outline" \| "soft" \| "solid"	"surface"	—
tone	"neutral" \| "accent" \| "success" \| "warning" \| "danger"	"neutral"	—
size	"sm" \| "md" \| "lg"	"md"	—
radius	"none" \| "small" \| "medium" \| "large" \| "full" \| "inherit" \| "concentric"	"inherit"	—