Components / Badge

Badge

Inline label chip for status, tags, and counts. Three rendering modes × five semantic intents.

Soft (default)

Muted bg + border + text. The standard alert chip pattern.

DefaultSuccessWarningDangerInfo

Solid

Filled background — use for high-contrast counts or labels.

DefaultSuccessWarningDangerInfo

Outline

Transparent bg with colored border.

DefaultSuccessWarningDangerInfo

With Dot

Status dot for live/active indicators.

OnlineAwayBusyOffline

MayaBadge API

Prop / EventTypeDefaultDescription
intentString"default"Semantic intent ("default", "success", "warning", "danger", "info").
variantString"soft"Rendering variant ("solid", "soft", "outline").
sizeString"md"Badge size ("sm", "md").
dotBooleanfalseShow a status dot next to the text.
#defaultSlotContent of the badge.