Components · Data

Metric

One number with its label underneath. Set onScreen inside a Screen; color matches a Chart series.

jsx

import { Metric } from '@andeus/ui';

On paper and on screen

12,804+8%

Visitors

−4

Errors

21.5°

Target

1.21

Sharpe

jsx

<Metric value="12,804" label="Visitors" delta="+8%" tone="positive" />
<Metric value="−4" label="Errors" tone="negative" />
<Screen>
  <Metric onScreen value="1.21" label="Sharpe" color="var(--screen-yellow)" />
</Screen>

Props

Prop	Type	Default
value	`string \| ReactNode`	Required
label	`string \| ReactNode`	Required
delta	`string \| ReactNode`	—
tone	`'neutral' \| 'positive' \| 'negative' \| 'accent'`	'neutral'
color	`string`	—	Overrides the value colour.
onScreen	`boolean`	false	Screen colours.
size	`'s' \| 'm' \| 'l'`	'm'
align	`'start' \| 'center'`	'start'

PreviousChart NextBlock