Meter
A single labelled horizontal-bar row — label, right-aligned figure, and a track-and-fill bar (value / max). Stack several inside a <koala-card> for a deep-linking funnel or breakdown, like the conveyancer dashboard's "Active caseload by stage". Each row is a clickable Alpine-AJAX link.
Canonical
<koala-meter href="@phaseUrl" label="Enquiries" value="12" max="18"
data-skeleton="list" />
The fill is value / max. Pass the largest sibling row's value as
max so the biggest bar fills the track and the rest read relative to it.
Stacked (funnel)
<div koala-card>
<h3 class="koala-section-title mb-4">Active caseload by stage</h3>
<div class="space-y-1">
@foreach (var phase in phases)
{
<koala-meter href="@phase.Url" label="@phase.Label" value="@phase.Count" max="@maxCount" data-skeleton="list" />
}
</div>
</div>
A shared max across the stack makes the rows a comparable funnel. Rows with a
small non-zero value keep a minimum sliver so they stay visible.
States
Hover tints the label text-primary and lifts a soft
bg-surface-container-low behind the row — the affordance that the whole row navigates.
Props
5 attributes| Attribute | Values | Notes |
|---|---|---|
| href | string | Navigation target — the row is always a clickable link. |
| label | string | Row label, shown on the left. |
| value | int | The figure, shown on the right and driving the fill width. |
| max | int | The largest sibling value — the fill is value / max. |
| target | string | Alpine-AJAX target. Defaults to main. |
Do & don't
max for a comparable breakdown that deep-links each row.
<koala-stat-tile>.