# Stat tiles
A number with its label and an icon in a tone - and, as a button, the filter for what it counts: the numbers a person reads are the buttons they press.
## Examples
`stat` holds an [icon tile](icon-tile.md), a `stat-value` and a `stat-label`; `stat-primary`, `stat-success`, `stat-warning`, `stat-danger`, `stat-info` and `stat-secondary` - a quiet zero - tint the icon and the number. As a `button` with `aria-pressed` a tile is a toggle: pressed, it wears its tone's border and the list below shows only what it counts. A row is a grid: two tiles a row on a phone, four from `md:`.
```html
```
A tile takes the stat's tone unless it has its own: `icon-tile-chart-3` or `icon-tile-success` on the tile stays, for a category in a neutral stat.
```html
14Uploaded
2,126Matched
```
Without a button it only reads: a `div class="stat"`. One long word breaks instead of running past a narrow tile.
```html
14Reconfigurations
3RefundsCounterbalancing
```
### Links
As an `a` a tile leads to the list it counts, filtered on its server; the tile of the list shown carries `aria-current="page"` and wears its tone's border, as a pressed one does.
```html
```
### A second line, a trend, a bar and a time
`stat-sub` is a second line under the label. `stat-delta` shows a change with an arrow: `data-trend="up"` or `"down"` turns it, and it is green when the trend is the good one - up, unless `data-good="down"` says that less is better, as for refunds - and red when not; its words say the change, "+12%", and the arrow only repeats them. A `progress` or a `meter` in the tile's words takes their width; `stat-meta` sits at the end - when the number was counted. A tile with no icon tile lays out its words alone, and `stat-emphasis` tints the whole tile in its tone, for the one number a screen leads with. `aria-busy="true"` draws the number as a placeholder while it is counted.
```html
412,000 THBRevenue in November+12% on October
6Refunds+2 on October
68%Rooms filled5 min ago
0Guests today
```
## Accessibility
- A tile button's name is its number and its label, "2 Late"; `aria-pressed` says it filters. Put the row in a `group` with a name.
- The tone repeats the label; it never says alone what the tile counts. A delta's color and arrow repeat its words.
- A tile link's name is its number and its label; the tile of the list shown says `aria-current="page"`. A tile counting its number is `aria-busy="true"`, and its words come when it is done.
- Pressed, the tile also draws an outline in forced colors.
## Tokens
From [`css/components/stat.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/stat.css). It declares `--redz-stat-tone`, `--redz-tile-base-bg`, `--redz-tile-base-fg` on its root, never on rows or items.
It reads the theme's `--redz-text`, `--redz-space-12`, `--redz-space-16`, `--redz-border`, `--redz-radius-12`, `--redz-bg`, `--redz-bg-hover`, `--redz-space-8`, `--redz-text-muted`, `--redz-fs-12`, `--redz-space-2`, `--redz-success`, `--redz-danger`, `--redz-radius-6`, `--redz-fs-24`, `--redz-primary`, `--redz-warning`, `--redz-info`.