Badge

Compact labels for statuses, counts, and tags. Shape matches Squad buttons (pill by default); optional rectangular variant.

Variants

The four built-in shadcn variants.

DefaultSecondaryOutlineDestructive

Sizes

Badge heights mirror Squad buttons: sm = button xs, default = button sm, lg = button default.

SmallDefaultLarge

Shapes

Pill default; rectangular override via rounded-sm.

PillRounded

Status

Semantic tones with optional leading dot — success, warning, destructive, info, muted, brand.

CompletedPendingFailedIn reviewDraftActive

Removable (tag chip)

Outline badge with an optional colored swatch and a trailing ×. Use for multi-select summaries, filter tags, and keyword lists.

Sermon DesignEvent DesignEaster DesignNo swatch

With content

Small counts, truncation, and icons are all supported.

New99+Really long badge label that gets truncated