Maple · Display

Badge

Short status labels. Tinted styles carry meaning by colour and a dot; Accent is solid for promotional tags like “New”.

View in Storybook →

Styles · Size S

DefaultSuccessWarningErrorInfoAccent
<Badge variant="success">Shipped</Badge>
<Badge variant="accent" size="m">New</Badge>

Styles · Size M

DefaultSuccessWarningErrorInfoAccent

Props

PropTypeDefaultDescription
variant"default" | "success" | "warning" | "error" | "info" | "accent""default"Meaning.
size"s" | "m""s"Size.

Usage

Do

  • Keep labels to one or two words.

Don't

  • Rely on colour alone — the label must say it.