Components
Badges
Badges
Compact status pills in seven semantic colours. One colour per meaning — Gold + shimmer is reserved for terminal-success.
Canonical
Sent
The most-used shape. Filled Success communicates a positive terminal status — a sent quote, a paid invoice.
Variants
9 variants
Success
Success
koala-badge="Success"
Danger
Danger
koala-badge="Danger"
Warning
Warning
koala-badge="Warning"
Info
Info
koala-badge="Info"
Neutral
Neutral
koala-badge="Neutral"
Complete
Gold + shimmer
koala-badge="Gold" koala-badge-shimmer
Outlined
Outlined
koala-badge-variant="Outlined"
Small
Small
koala-badge-size="Small"
Yes
No
Bool glyph
koala-badge-bool="true|false"
States
3 states
Default
Default
Complete
Shimmer
Animated sheen for terminal success
Yes
With glyph
Tick / cross prepended automatically
Props
5 attributes| Attribute | Values | Notes |
|---|---|---|
| koala-badge | Neutral, Success, Warning, Danger, Info, Gold | Required. Selects the colour family. Defaults to Neutral. |
| koala-badge-variant | Filled, Outlined | Defaults to Filled. Outlined drops to muted surface for low-emphasis pills. |
| koala-badge-size | Default, Small | Defaults to Default. Small for inline-with-text use. |
| koala-badge-bool | true, false | Prepends a tick (true) or cross (false) glyph in front of the label. |
| koala-badge-shimmer | true, false | Adds the animated sheen sweep. Reserved for Gold “Complete”. |
Do & don't
Awaiting
Sent
Complete
Do
One colour per meaning. Reserve Gold + shimmer for the terminal “Complete” status.
Draft
Sent
Don't
Don't reach for Gold + shimmer on intermediate states. The sweep is reserved for terminal success and stops landing as a moment when it appears earlier.