Components Stat tiles

Stat tiles

Clickable dashboard tile — an eyebrow label over a big .koala-figure value with a trailing arrow, wrapped in a hover-lift card. The at-a-glance "platform state" tile (Adminland, partner home). For a small label-over-value figure inside a detail-page stat grid, use <koala-stat-card> instead.

<koala-stat-tile>

Canonical

Organisations

128

Koala admins

<koala-stat-tile href="@usersUrl" label="Koala admins" value="@Model.AdminUserCount" />

Always a clickable card: the tile navigates (default Alpine-AJAX target main) and carries the hover lift. Drop several into a responsive grid for a dashboard row.

Variants

3 variants

Organisations

128

Email sending

Sending

Failed emails (7d)

Figure — pass value for a plain number/string.

<koala-stat-tile href="@usersUrl" label="Koala admins" value="@Model.AdminUserCount" />

Badge — slot child content instead of value for a status pill.

<koala-stat-tile href="@emailUrl" label="Email sending">
    <span koala-badge="Success" koala-badge-variant="Filled">Sending</span>
</koala-stat-tile>

Danger — tints the figure + arrow when a non-zero count needs attention.

<koala-stat-tile href="@failedEmailsUrl" label="Failed emails (7d)"
                 value="@Model.FailedEmailCount" danger="@(Model.FailedEmailCount > 0)" />

States

Organisations

128

Hover lifts the card (shadow-floating) — the same affordance as any clickable <a koala-card>.

Props

5 attributes

Attribute	Values	Notes
href	string	Navigation target — the tile is always a clickable card.
label	string	Eyebrow label above the value.
value	string?	Plain figure. Omit and slot child content for a badge.
target	string	Alpine-AJAX target. Defaults to `main`.
danger	bool	Tints the figure + arrow `text-danger`.
(content)	slot	Richer value (a badge) instead of `value`.

Do & don't

Organisations

128

Do Use it for an at-a-glance dashboard metric that navigates somewhere — a count, a status, a "needs attention" figure.

A small label/value tile inside a detail-page stat grid

Don't Don't use it for a non-clickable detail-page metric — that's <koala-stat-card> (small value, no card, no arrow).