Badge
A compact element displaying labels, numbers, or indicators, often used for status, notifications, or categorization.
Label
Usage
import { Badge } from "@lemonsqueezy/wedges";<Badge>Label</Badge>API Reference
In addition to all the props defined as HTMLAttributes<HTMLSpanElement>, Badge component also includes the following props:
| Prop | Value | Default |
|---|---|---|
after | ReactElement<HTMLElement> | / |
before | ReactElement<HTMLElement> | / |
color | BadgeColors | "gray" |
shape | "rounded" | "pill" | "rounded" |
size | "sm" | "md" | "md" |
stroke | boolean | false |
Examples
The following example shows different variants of the Badge component.
PaidActivePaid200
RejectedChargebackDisconnected
VoidExpiredDraftOnline
ProcessingFlaggedWashington D.C.
SpecialTrialBookmarkedLive
MovedNewSecureLocked
BetaHello!1m 30sPinned4
Design Systems@ormanclarkFree Wi-Fi