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)

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"

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.