Components · v0.1
Badge
Small, semantic status pills. Use them to tag records, indicate state, and communicate meta without stealing focus from the content.
Example
A quiet way to communicate status and metadata.
Live
Variants
NeutralPrimaryAccentOutlineSuccessWarningDanger
Sizes
SmallMediumLarge
Status dot
OnlineDegradedDown
API
Prop
Type
Default
Description
variant"neutral" | "primary" | "accent" | "outline" | "success" | "warning" | "danger""neutral"Semantic tone. Reserve success/warning/danger for status meaning.size"sm" | "md" | "lg""md"Height and horizontal padding.dotbooleanfalseShow a leading status dot. Auto-colors to the badge variant.