Stat

A figure with a trend read as words.

JavaScript off: what the HTML and CSS do on their own.

A key figure: a label, a large value, and optionally how it changed and a note. No script.

Usage

razor

<Stat Label="Revenue" Value="$48,210" Change="12%" Trend="StatTrend.Up" Description="vs last month" />

Trends

Use Trend and Change for how the figure moved; ChangeStatus colors a drop that's good news.

Preview Code

Preview

Revenue: $48,210; Up 12%vs last month

Active users: 2,340; Down 3.1%vs last week

Response time: 182 ms; Faster by 24 msvs last week

Code

Trends.razor

<Grid Columns="new() { Base = 1, Sm = 3 }" Gap="4" Grow>
    <Card><Stat Label="Revenue" Value="$48,210" Change="12%" Trend="StatTrend.Up" Description="vs last month" Icon="Lucide.DollarSign" /></Card>
    <Card><Stat Label="Active users" Value="2,340" Change="3.1%" Trend="StatTrend.Down" Description="vs last week" Icon="Lucide.UsersRound" /></Card>
    @* Down is good here. *@
    <Card><Stat Label="Response time" Value="182 ms" Change="24 ms" Trend="StatTrend.Down" ChangeStatus="Status.Success" TrendLabel="Faster by" Description="vs last week" Icon="Lucide.Timer" /></Card>
</Grid>

Sizes

Use Size for the label's and figure's text size.

Preview Code

Preview

Orders: 128; Up +8

Orders: 128; Up +8

Orders: 128; Up +8

Code

Sizes.razor

<Row Gap="10" Wrap Align="Align.End" Justify="Justify.Center">
    <Stat Size="ControlSize.Sm" Label="Orders" Value="128" Change="+8" Trend="StatTrend.Up" />
    <Stat Label="Orders" Value="128" Change="+8" Trend="StatTrend.Up" />
    <Stat Size="ControlSize.Lg" Label="Orders" Value="128" Change="+8" Trend="StatTrend.Up" />
</Row>

Mode support

What works in each mode, Stat
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a dl: Label is the dt, the value a dd, and the change and note share a second dd, so the label names the figure for screen readers.
The trend arrow is hidden from screen readers; the change is read with TrendLabel in front of it, "Up", "Down" or "No change" by default.
The change's color isn't read, so when the color carries meaning (ChangeStatus), say it in Description or TrendLabel too.
The Icon is decorative and hidden from screen readers.

Parameters

Stat parameters
Prop	Type	Default
`Label`What the figure is, such as "Revenue".	`string?`
`Value`The figure, such as "$48,210".	`string?`
`ChildContent`Custom value content, such as a number with a unit in smaller text.	`RenderFragment?`
`Change`How much it changed, such as "12%" or "+340".	`string?`
`Trend`Which way it moved: adds an arrow before Change and colors it.	`StatTrend`	`StatTrend.None`
`ChangeStatus`The change's color.	`Status?`
`TrendLabel`Read before the change in place of the arrow.	`string?`	`computed`
`Description`A muted note after the change, such as "vs last month".	`string?`
`Icon`An icon in a tinted square at the end.	`IconData?`
`Size`Text size.	`ControlSize`	`ControlSize.Md`

Plus 16 item props and 4 common props.

Full API