Components Pills

Pills

Rounded meta pill on the warm surface, with an optional brand-coloured leading icon. Used for the advert hero detail pills and the “Koala Tech” marker on the brochure sites.

<koala-pill>

Canonical

Sheffield (hybrid)

<span koala-pill koala-pill-icon="@(Koala.Web.TagHelpers.IconName.MapPin)">Sheffield (hybrid)</span>

The default pill: a single fact with a brand-coloured icon. Used in a row to summarise an advert — location, hours, salary.

Variants

4 variants

Full-time

Default, with icon

koala-pill koala-pill-icon="Clock"

Full-time

Default, no icon

koala-pill

Up to £75,000

Small, with icon

koala-pill-size="Small"

Koala Tech

Small, no icon

koala-pill-size="Small"

No icon — omit koala-pill-icon for a text-only pill.

<span koala-pill>Full-time</span>

Small — inline tags next to a heading.

<span koala-pill koala-pill-size="Small" koala-pill-icon="@(Koala.Web.TagHelpers.IconName.CreditCard)">Up to £75,000</span>

Props

2 attributes

Attribute	Values	Notes
koala-pill-size	Default, Small	Defaults to `Default` (advert hero pills). `Small` for inline tags next to a heading.
koala-pill-icon	IconName?	Optional brand-coloured leading icon. Pass as `@(Koala.Web.TagHelpers.IconName.X)` (nullable enum). Omit for a text-only pill.

Do & don't

Sheffield (hybrid) Full-time Up to £75,000

Do Use a row of default pills to summarise the key facts of an advert, one icon per fact.

Full-time, hybrid, Sheffield, up to £75,000, great team, apply today

Don't Don't cram a sentence into one pill. A pill is a single short fact — split it, or use body text.

Summary chip

<koala-summary-chip> — a clickable pill for dashboard heroes: a brand-coloured icon, an emphasised count, then a short label. Each chip deep-links to the matching pre-filtered list; Alpine-AJAX nav attributes (x-target.push, data-skeleton) pass straight through.

2completing this week 3quotes to chase 1needs an update

<a koala-summary-chip koala-summary-chip-icon="Calendar" koala-summary-chip-count="2"
   href="/conveyancing/transactions?Status=InProgress&Sort=completion-asc"
   x-target.push="main" data-skeleton="list">completing this week</a>

Attribute	Values	Notes
koala-summary-chip-count	int	The emphasised figure shown before the label.
koala-summary-chip-icon	IconName	Optional brand-coloured leading icon. Omit for no icon.
href	string	Deep-link target. Plus any pass-through nav attributes (`x-target.push`, `data-skeleton`).