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

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>

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