All components (204)

Summary stat

Surfaces · Stat · .amset-stat

What it is and when to use it

The big number on a dashboard, with its change. The change carries an arrow, a sign and the word ("goes up", "goes down") in addition to the color: many people miss green and red, and in a printout they do not exist.

When to use it

The header figures of a panel: the month's sales, orders, average ticket, returns.
trend.value is a fraction of one (0.124 is 12.4%) and trend.period says what it is compared with ("vs. last month"). trend.goodDirection says which way is good: for sales, top (default); for expenses or returns, bottom. Without it, green and red lie half of the time.
detail for a small second line; icon and tone for the icon (the tone does not change the color of the figure).
href turns the label into a link to the detail.
loading while the data arrives: it keeps the place of the number and the change (with the shimmer of the Skeleton) instead of showing a false zero, so the card does not jump on arrival.
size: the figure at 20, 28 (default) or 36 px.

When not to

How the figure has gone day by day: Trend (the line) or BarChart.
A level against a maximum (quota, stock): Gauge.
Several label and value pairs (a customer's record): DataList.

Keyboard: it is not focusable, except with href: then the label is a link with its Tab stop, and Enter follows it.

Accessibility: the change is written with a sign and in the language's format ("+12.4%"), followed by the word and the period; the arrow and the icon are decorative. With loading the block carries aria-busy and in place of the value and the change go their placeholders, which are decorative. The value arrives already written: the component does not format it.

Fine-tuning: CSS variables --amset-stat-*: -figure (the size of the number), -font (that of the label and the change), -icon, -icon-drawing, -icon-background and -icon-ink (the tone only colors the icon). The header is always as tall as the icon, with or without an icon: in a row of figures, the numbers line up at the same height.

Context: the change is written in the language of LocaleProvider (or AmsetProvider).

What it looks like

12.480 €

+8.4%up

Of 128 this month

<Stat label="Invoiced this month" value="12,480 EUR" trend={{ value: 0.084, goodDirection: 'top' }} />
<Stat label="Unpaid orders" value="4" tone="warning" detail="Of 128 this month" />

Props

Import it with import { Stat } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What is being measured: "Monthly sales".
`value`required	`ReactNode`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`detail`	`ReactNode`	Second small line: a total, a note.
`href`	`string`	Turns the title into a link to the detail.
`icon`	`ReactNode`	—
`loading`	`boolean`	While the data arrives: it is marked busy instead of showing a false zero, and it keeps the place of the figure and the change so as not to jump.
`size`	`"sm" \| "md" \| "lg"`	The size of the figure: 20, 28 or 36 px.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	The color of the icon. It does not change that of the figure. By default, `neutral`.
`trend`	`StatChange`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-stat-figure`	`1.75rem`
`--amset-stat-font`	`var(--amset-text-sm)`
`--amset-stat-icon`	`1.75rem`
`--amset-stat-icon-drawing`	`1rem`
`--amset-stat-icon-background`	`var(--amset-divider)`
`--amset-stat-icon-ink`	`var(--amset-ink-2)`

How to change it

.amset-stat {
  --amset-stat-figure: ...;
  --amset-stat-font: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: