Badge

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

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

Colors

AccentSuccessWarningDangerNeutral

<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

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

Radius — default follows the theme, override is fixed

NoneSmallMediumLargeFullInherit (default)

{/* 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

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

Props

Prop	Type	Default
icon	React.ReactNode	—
color	"neutral" \| "accent" \| "success" \| "warning" \| "danger"	"neutral"
size	"sm" \| "md" \| "lg"	"md"
radius	"none" \| "small" \| "medium" \| "large" \| "full" \| "inherit"	"inherit"