Dashboard and StatCard

Open in Playground

StatCard can also be a link or a button: href (with linkComponent / linkProp for a router) or onClick makes the whole tile clickable. icon sits top right, status adds a small chip coloured by statusTone, disabled marks a restricted tile, and loading shows a placeholder for the value.

Lair overview

Last 30 days

Bananas48k12%

Slips2.1%0.4%

Minions3,204on duty

Mischief

Banana share

Kevin
Stuart

Minions3,204Happy

Gru's vault$1BRestricted

Loot

Props

Dashboard

titleReactNode
Page title.
subtitleReactNode
Text under the title.
actionsReactNode
Header actions.
stats{ label, value, delta?, trend?, hint? }[]
Default: []
Stat tiles.
columns1 | 2 | 3
Default: 2
Columns of the panel grid.
childrenReactNode
Panels.

Dashboard props
Prop	Type	Default	Description
`title`	ReactNode	–	Page title.
`subtitle`	ReactNode	–	Text under the title.
`actions`	ReactNode	–	Header actions.
`stats`	{ label, value, delta?, trend?, hint? }[]	`[]`	Stat tiles.
`columns`	1 \| 2 \| 3	`2`	Columns of the panel grid.
`children`	ReactNode	–	Panels.

StatCard

iconReactNode
Icon shown at the top right.
statusReactNode
Small status Chip under the value.
statusTone'default' | Tone
Default: default
Colour of the status Chip.
hrefstring
Makes the whole tile a link.
linkComponentElementType
Default: a
Component used for the link, e.g. a router Link.
linkPropstring
Default: href
Name of the destination prop on linkComponent.
onClickMouseEventHandler
Makes the tile a button (also runs on a link).
disabledboolean
Default: false
Unavailable tile: dimmed, not clickable, aria-disabled.
loadingboolean
Default: false
Shows a placeholder instead of the value and sets aria-busy.
size'default' | 'compact'
Default: 'default'
Compact puts the value beside the label in a shorter tile.
labelstring
Metric name.
valueReactNode
Metric value.
deltastring
Change shown beside the value.
trend'up' | 'down' | 'flat'
Default: 'flat'
Colors the delta.
hintstring
Small text below.
classNamestring
Default: ''
Extra classes for the root element.

StatCard props
Prop	Type	Default	Description
`icon`	ReactNode	–	Icon shown at the top right.
`status`	ReactNode	–	Small status Chip under the value.
`statusTone`	'default' \| Tone	`default`	Colour of the status Chip.
`href`	string	–	Makes the whole tile a link.
`linkComponent`	ElementType	`a`	Component used for the link, e.g. a router Link.
`linkProp`	string	`href`	Name of the destination prop on `linkComponent`.
`onClick`	MouseEventHandler	–	Makes the tile a button (also runs on a link).
`disabled`	boolean	`false`	Unavailable tile: dimmed, not clickable, `aria-disabled`.
`loading`	boolean	`false`	Shows a placeholder instead of the value and sets `aria-busy`.
`size`	'default' \| 'compact'	`'default'`	Compact puts the value beside the label in a shorter tile.
`label`	string	–	Metric name.
`value`	ReactNode	–	Metric value.
`delta`	string	–	Change shown beside the value.
`trend`	'up' \| 'down' \| 'flat'	`'flat'`	Colors the delta.
`hint`	string	–	Small text below.
`className`	string	`''`	Extra classes for the root element.