Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesDisplayBadge

Badge

Status/label chip. Colour, variant, size and shape as legacy koala-badge-* attributes.

<koala-badge>

Colour

koala-badge-variant="Filled"
Primary Success Danger Warning Info Neutral Gold
koala-badge-variant="Outlined"
Success Danger Neutral
koala-badge-variant="Dot"
Success Danger Neutral

Size & shape

Small Default Pill

States

Bool: true
Yes
Bool: false
No
Shimmer
Complete

Lead

koala-badge-lead="Tick"
Completed
koala-badge-lead="Dot"
Blocked
koala-badge-lead="DotHollow"
Up next
koala-badge-lead="None" (no dot at all)
Up next

Pill

koala-pill-icon="MapPin"
Sheffield (hybrid)
No icon
Full-time
koala-pill-size="Small"
Up to £75,000

Role badge

Admin Org admin Estate agent Mortgage broker Conveyancer admin Conveyancer

Disabled badge

Disabled Disabled

Count

5 12 7 9

Count with progress

9 9 9 9 128

Summary chip

2completing this week 3quotes to chase

Stamp

Forbidden Not found

API

koala-badge NeutralSuccessWarningDangerInfoGold
koala-badge-variant FilledOutlinedDot
koala-badge-size DefaultSmall
koala-badge-shape RoundedPill
koala-badge-bool truefalse
koala-badge-shimmer truefalse
koala-badge-lead NoneDotDotHollowTick
koala-pill bool
koala-pill-size DefaultSmall
koala-pill-icon IconName
role AdminOrganisationAdminEstateAgentMortgageBrokerConveyancerAdminConveyancer
small bool (koala-role-badge)
tooltip string (koala-role-badge)
if-disabled-at DateTimeOffset?
variant OutlinedFilled (koala-disabled-badge)
koala-summary-chip-icon IconName
koala-summary-chip-count int
koala-badge-count shape PillBoxedDisc
koala-badge-count percent int 0-100 (draws the ring, forces Disc)
koala-badge-count tooltip string
koala-badge-count donut-key string (remembers the sweep across a re-render)