Badges - Koala Design

Filled badges

The default variant. Each colour maps to a semantic meaning.

New Active Expired Cancelled Complete

<span koala-badge="Neutral">New</span>
<span koala-badge="Success">Active</span>
<span koala-badge="Warning">Expired</span>
<span koala-badge="Danger">Cancelled</span>
<span koala-badge="Info">Complete</span>

Outlined badges

Use koala-badge-variant="Outlined" for type badges and property badges.

Estate agent Enabled Invited Disabled Info

<span koala-badge="Neutral" koala-badge-variant="Outlined">Estate agent</span>
<span koala-badge="Success" koala-badge-variant="Outlined">Enabled</span>
<span koala-badge="Warning" koala-badge-variant="Outlined">Invited</span>
<span koala-badge="Danger" koala-badge-variant="Outlined">Disabled</span>
<span koala-badge="Info" koala-badge-variant="Outlined">Info</span>

Sizes

Default size uses text-sm. Small uses text-xs for compact contexts.

Default size Small size

<span koala-badge="Success">Default size</span>
<span koala-badge="Success" koala-badge-size="Small">Small size</span>

Boolean badges

Use koala-badge-bool to auto-prepend a green tick (true) or red cross (false) SVG icon. Used for property attributes like New build, Mortgage, Shared ownership.

New build Mortgage Shared ownership Help to buy

<span koala-badge="Neutral" koala-badge-variant="Outlined"
      koala-badge-bool="true" class="py-1.5">New build</span>

<span koala-badge="Neutral" koala-badge-variant="Outlined"
      koala-badge-bool="false" class="py-1.5">Mortgage</span>

Attributes

Attribute	Type	Default	Description
koala-badge	BadgeColor	Neutral	Neutral, Success, Warning, Danger, Info
koala-badge-variant	BadgeVariant	Filled	Filled or Outlined
koala-badge-size	BadgeSize	Default	Default (text-sm) or Small (text-xs)
koala-badge-shape	BadgeShape	Pill	Pill (rounded-full) or Rounded (rounded-lg). Outlined badges auto-switch to Rounded.
koala-badge-bool	bool?	null	Prepends green tick (true) or red cross (false) SVG icon

Colour reference

Semantic colour names and their typical usage.

Name	Tailwind colour	Used for	Example
Neutral	Gray	New, Blocked, roles	New
Success	Emerald	Active, Accepted, Enabled	Active
Warning	Amber	Expired, Invited	Expired
Danger	Red	Cancelled, Disabled	Cancelled
Info	Blue	Complete	Complete

Admin badge

Outlined neutral badge with an amber crown — marks a partner-admin or org-admin user. Centralised so the crown SVG only lives in one place.

Admin Admin Admin

<koala-admin-badge />
<koala-admin-badge small="true" />
<koala-admin-badge tooltip="Manages quotes, transactions, branches, and team" />

Disabled badge

Conditional Danger badge that renders only when the entity has a disabled-at timestamp. Replaces the @if (entity.DisabledAt != null) { <span koala-badge="Danger">Disabled</span> } ladder that shows up next to every soft-deletable entity name (branches, partners, partner users). If if-disabled-at is null, nothing renders.

<!-- Always renders the helper; the helper itself decides whether to output anything -->
<koala-disabled-badge if-disabled-at="@branch.DisabledAt" />

<!-- Filled variant matches older sites that used a solid Danger badge -->
<koala-disabled-badge if-disabled-at="@branch.DisabledAt" variant="Filled" />

<!-- Small size for inline use next to a name -->
<koala-disabled-badge if-disabled-at="@branch.DisabledAt" size="Small" class="shrink-0" />

Caveat: on pages where the disabled state is one of three states (Disabled / Invited / Active), write the full @if/@else if/@else chain inline rather than mixing koala-disabled-badge as one branch — orphan else if without a leading @if is rendered as plain text by Razor.