Basic
Preview
Code
Monthly active users12,480
Increased by 8.2%
vs. last monthInstallation
Package
CLI (copy source)
pnpm
pnpm add @advui/datanpm
npm install @advui/dataUsage
import { Stat } from '@advui/data'
<Stat>
<Stat.Label>Revenue</Stat.Label>
<Stat.Value>$48,210</Stat.Value>
<Stat.Delta trend="up">12.5%</Stat.Delta>
<Stat.HelpText>vs. last month</Stat.HelpText>
</Stat>Examples
Trends and tones
A drop in refunds is good news, so it keeps the down arrow but reads positive.Preview
Code
Revenue$48,210
Increased by 12.5%
Refunds$1,092
Decreased by 3.1%
Open tickets37
No change: 0%
Sizes
Preview
Code
Size sm2,350Orders this week
Size md2,350Orders this week
Size lg2,350Orders this week
API reference
Stat
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Type scale of the label, value and help text. |
Stat.Label
Muted name of the figure.Stat.Value
The figure, in the heading font.Stat.Delta
The change since the last period, with an arrow.| Prop | Type | Default | Description |
|---|---|---|---|
trend | 'up' | 'down' | 'neutral' | 'neutral' | Direction of the change; picks the arrow. |
tone | 'positive' | 'negative' | 'neutral' | from `trend` | Good or bad news; picks the color. `up` is positive and `down` negative unless you say otherwise. |
variant | 'plain' | 'badge' | 'plain' | `badge` puts the change on a soft pill. |
trendLabel | string | from `trend` | Read by screen readers before the value: 'Increased by', 'Decreased by' or 'No change:' for the `trend`. Translate it here. |
Stat.HelpText
Small muted note, such as the period.Accessibility
- The parts are plain text read in order: label, value, change, note.
- The arrow is hidden from screen readers;
Stat.Deltareads its direction as words ("Increased by 12.5%"). SettrendLabelto translate it. - Color is never the only signal: the arrow and the words carry the direction too.
Platform notes
Web
The trend label is visually hidden text before the value.
iOS
The trend label joins the value’s accessibility label when the value is text.
Android
Same as iOS.