Badges

Badge components for displaying status, labels, and metadata.

Badge variants

PrimarySecondarySuccessWarningInfoDestructiveOutline

Different variants communicate different meanings: success for positive, warning for caution, destructive for errors.

Light appearance

PrimarySecondarySuccessWarningInfoDestructive

Light appearance badges are softer and less prominent, good for secondary information.

Outline appearance

PrimarySuccessWarningInfoDestructive

Outline badges have a subtle border and background, ideal for less prominent labels.

Badge sizes

SmallDefaultLarge

Badges come in three sizes to match different contexts and information density.

Badge with dot

Active Pending Offline Neutral

Dot indicators add visual emphasis to status badges.

Badge with icons

Completed Failed

Icons can be added to badges for additional visual context.

Offer status badges

New offer

Pending

Accepted

Accepted

Declined

Declined

Countered

Countered

Waiting for response

Sender view

Offer-specific badges using outline appearance for status indicators and light appearance for the sender's waiting state.

Circular shape

DefaultSuccessError

Circular badges are fully rounded, suitable for tags and labels.