Vital Tile

Life · VitalTile

One health value with its healthy range: the value, a band with the normal zone and a marker, a status in words (in range, below, above) and an optional trend.

normal is the healthy range; scale the whole band (default: the range with room around it).
digits for decimals, unit, caption for the source and time of the reading.
The status is text in a badge, never colour alone.

PreviewCode

Resting heart rateIn range

58bpm

Normal 50–80Watch · this morning

Blood pressure (systolic)Above range

138mmHg

Normal 90–129Cuff · yesterday 21:10

Weight

74.2kg

Scale · today

Props

VitalTile

Prop	Type	Notes
`surface?`	`Surface`	`"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`.
`label`	`string`	Required
`value`	`number`	Required
`unit?`	`string`
`icon?`	`IconName`
`normal?`	`[number, number]`	The healthy range [low, high]; the tile says whether the value is below, in or above it.
`scale?`	`[number, number]`	The whole scale of the band [min, max] (default: the normal range with room on both sides).
`trend?`	`number[]`	Recent values, oldest first, drawn as a sparkline.
`caption?`	`ReactNode`	Under the value: when it was measured, the source …
`digits?`	`number`	Digits after the decimal point (default 0).
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.