stat

A headline number with a label and change.

Example

Active members 48,213 +2.4% vs last week
Failed runs 3 +3 in 24 hours
Admins 6
Alert events 3 last 24 hours

Laravel

<x-admin::grid min="11rem" equal>
    <x-admin::stat label="Active members" value="48,213" delta="+2.4%" trend="up" meta="vs last week" />
    <x-admin::stat label="Failed runs" value="3" delta="+3" trend="down" meta="in 24 hours" />
    <x-admin::stat label="Admins" value="6" icon="users" tone="brand" />
    <x-admin::stat label="Alert events" value="3" icon="alert" tone="danger" meta="last 24 hours" />
</x-admin::grid>

Props

PropRequiredDefaultOptions
labelyes
valueyes
metanull
deltanull
trendnull
iconnull
tone"neutral"neutral, brand, info, success, warning, danger

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Stat } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div style="--_min:11rem;--_gap:var(--ad-space-4);gap:var(--_gap)" class="adm-grid adm-grid--equal"><div class="adm-card adm-stat">
        <span class="adm-stat__label">Active members</span>
    <span class="adm-stat__value">48,213</span>
            <span class="adm-stat__meta">
            <span class="adm-delta--up">+2.4%</span>            vs last week
        </span>
        </div>
    <div class="adm-card adm-stat">
        <span class="adm-stat__label">Failed runs</span>
    <span class="adm-stat__value">3</span>
            <span class="adm-stat__meta">
            <span class="adm-delta--down">+3</span>            in 24 hours
        </span>
        </div>
    <div class="adm-card adm-stat adm-stat--icon">
    <span class="adm-stat__icon adm-stat__icon--brand"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0M16 3.5a4 4 0 0 1 0 9M22 21a7 7 0 0 0-4-6.3"/></svg></span><span class="adm-stat__body">    <span class="adm-stat__label">Admins</span>
    <span class="adm-stat__value">6</span>
        </span></div>
    <div class="adm-card adm-stat adm-stat--icon">
    <span class="adm-stat__icon adm-stat__icon--danger"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg></span><span class="adm-stat__body">    <span class="adm-stat__label">Alert events</span>
    <span class="adm-stat__value">3</span>
            <span class="adm-stat__meta">
                        last 24 hours
        </span>
        </span></div></div>