Koala logo Design
Overview Colours Typography Icons Dark mode Avatar pickers Avatars Badges Breadcrumbs Buttons Cards Empty states Nav items Stat cards Steppers Sticky headers Switchers Tables Tabs Timelines Charts Rich text Tooltips Action menus Forms Autocomplete Modals Notifications Side trays

Badges

Use the koala-badge tag helper with semantic colour names. Supports filled/outlined variants, sizes, and boolean icon badges.

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>

Type badges

Purchase and Sale badges use the Outlined variant with arrow SVG icons as child content. Purchase uses an arrow-up-right (NE) icon, Sale uses an arrow-down-right (SE) icon.

Purchase Sale 
<span koala-badge="Neutral" koala-badge-variant="Outlined" class="py-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M7 7h10"></path>
        <path d="M17 7v10"></path>
        <path d="M7 17 17 7"></path>
    </svg>
    Purchase
</span>

<span koala-badge="Neutral" koala-badge-variant="Outlined" class="py-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M7 7l10 10"></path>
        <path d="M17 7v10"></path>
        <path d="M7 17h10"></path>
    </svg>
    Sale
</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