Components / Display / Stat tile

Stat tile

Ready

A count people check at a glance at the top of a screen. It shows a number, not an action.

Platforms Phone · TabletGroup DisplayUpdated 26 Oct 2026

When to use

  • A screen opens with a few counts people check first, such as how many items are in each step.
  • Two to four counts that belong together.

When not to use

If people need toUse
Split a list by statusPrimary tabs (the count sits in the tab)
Show the status of one recordStatus label
Start an actionButton or Add button

Anatomy

120Labelegg
  1. Tile · required; white, corners 8
  2. Number · required
  3. Label · required; what is being counted
  4. Icon box · required; tinted by tone

Variants

VariantPurposeFigma
TurquoiseTotals that came inDesigned
GreenThings in a good or settled stateDesigned
CoralThings moving on or needing careDesigned
AmberThings waiting or about to be removedDesigned

States

StateWhenWhat changesFigma
DefaultAlwaysNumber and label shownDesigned
LoadingThe count is being fetchedLight grey block where the number goesTemporary rule
ZeroNothing to countShows 0; the tile staysDesigned

Behaviour

  • Tiles are not tappable. To act on a count, use the tabs or the list below.
  • Phone shows two tiles per row; tablet shows up to four in one row.
  • The group sits on the page colour, 16 from the edges, 12 between tiles.

Phone and tablet

PhoneTablet
Tiles per row2Up to 4
Number24 Semibold28 Semibold

Content

PartRule
NumberThe count only; no units unless the count is not of items
LabelWhat is counted, in two to four words, sentence case

Do and don't

120Labelegg
10Labelegg_alt
DoPlain white tiles with a tinted icon box carry the colour.
120Label · 120 total
Don'tAdd borders or colour stripes, colour the number, or repeat it in the label.
Status labelPrimary tabsList layoutColour
← HistoryBottom sheet →