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.
  • dot
    boolean
    false
    Show a leading status dot. Auto-colors to the badge variant.