Badges
Small, rounded status labels. Source: src/ui/Badge.tsx.
Variants
Eight tones for status and categorization.
DefaultSuccessWarningErrorInfoPurpleTealOrange
Corner styles
Use rounded corners for compact labels, or the default pill for statuses.
RoundedPillStableBeta
In context
Badges sit inline alongside text and headings — the colored tones flag general states.
Payment PaidBuild PendingDeploy Failed
Library status
Library maturity badges (alpha, beta, RC, new…) are intentionally neutral — the word carries the meaning, not the color — so the chip never competes with a library's brand color and reads consistently across every surface (hero, nav, docs). Source: src/components/LibraryStatusBadge.tsx.
alphabetaRCnew