Components Badges

Badges

Compact status pills in seven semantic colours. One colour per meaning — Gold + shimmer is reserved for terminal-success.

<koala-badge>

Canonical

Sent

<span koala-badge="Success">Sent</span>

The most-used shape. Filled Success communicates a positive terminal status — a sent quote, a paid invoice.

Variants

9 variants

Success

koala-badge="Success"

Danger

koala-badge="Danger"

Warning

koala-badge="Warning"

Info

koala-badge="Info"

Neutral

koala-badge="Neutral"

Complete

Gold + shimmer

koala-badge="Gold" koala-badge-shimmer

Outlined

koala-badge-variant="Outlined"

Small

koala-badge-size="Small"

Yes No

Bool glyph

koala-badge-bool="true|false"

Gold + shimmer — the animated sheen reserved for terminal success.

<span koala-badge="Gold" koala-badge-shimmer="true">Complete</span>

Bool glyph — auto-prepends a tick (true) or cross (false) before the label.

<span koala-badge="Success" koala-badge-bool="true">Yes</span>

States

3 states

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.

Role badge

One canonical pill for every user role. Outlined neutral surface, uniform size, optional icon. Replaces inline role badges and the old admin-only helper.

<koala-role-badge>

Admin Org admin Estate agent Mortgage broker Conveyancer admin Conveyancer

<koala-role-badge role="Conveyancer" />

Attribute	Notes
role	Required role enum: Admin, OrganisationAdmin, EstateAgent, MortgageBroker, ConveyancerAdmin, Conveyancer.
small	Renders the smaller form factor.
tooltip	Optional Tippy tooltip text (typically the role permissions list).

Disabled badge

Outlined danger badge that renders only when the supplied timestamp is non-null. Use next to soft-deletable entity names (branches, partners, partner users).

<koala-disabled-badge>

Disabled Disabled

<koala-disabled-badge if-disabled-at="@user.DisabledAt" />

Attribute	Values	Notes
if-disabled-at	DateTimeOffset?	Required. When null, the helper renders nothing.
size	Small, Default	Same scale as `koala-badge`.
variant	Outlined (default), Filled	Filled matches older sites that used a solid Danger badge.