Content
StatTile
One number that matters, in a card: a label with an icon, the value large in Figtree, and a short footer.
Preview
Props
| Prop | Type | Description |
|---|---|---|
labelRequired | React.ReactNode | |
valueRequired | React.ReactNode | |
icon | IconName | |
tone | 'neutral' | 'accent' | 'informative' | 'positive' | 'notice' | 'negative' | 'brand' | Colors the icon and its tinted square. Default gray; brand is the logo's sand, for money and brand moments. |
caption | React.ReactNode | |
href | string | |
variant | CardProps['variant'] | |
className | string | |
compact | boolean | Short (phones): smaller number and padding, and the caption kept for screen readers only. |
children | React.ReactNode | A visual under the number (a Meter, a WeekProgress with head false). The caption stays pinned to the bottom so tiles in a row line up. |
Guidelines
One number that matters, in a card: a label with an icon, the value large in Figtree, and a short footer.
Provide: label, value (pre-formatted), icon, tone to color the icon and the small tinted square it sits in (accent, informative, negative, notice, positive, or brand for the logo's sand; default gray), caption, href (the whole tile opens the filtered list), and footer content such as a Badge as children.
- Color the icon only when the number carries meaning (overdue is
negative); everyday counts stay gray.
- Four at most in a row; only numbers you would act on.
- A tile that signals trouble carries a badge with words, so meaning never depends on color.
- Put a visual under the number as children (a Meter, or a WeekProgress with
head: false). The caption is pinned to the bottom, so in a row of tiles the labels, numbers, bars and captions all line up. Use the same component for every tile in a row.
- The icon is a filled glyph in its tone's color with no tile behind it (
checkmark-circle-filledandalert-triangle-filledfor status; on Home the This week and Revenue tiles keep the line iconscalendar-dayandwallet, Roger's call). The number is 22px, so a row of tiles stays short and the calendar below gets the attention. compact(phones): a shorter tile, smaller number and padding, with the caption kept for screen readers only. Home uses it on phones.