DataValue

Interactive

See DataValue in Storybook for every variant, with live controls.

A mono data value — timestamps, IDs, counts, durations.

import { DataValue } from "@kairosis/eidos";

<DataValue>2m 14s</DataValue>
<DataValue>#4021</DataValue>
<DataValue color="var(--success)">passing</DataValue>

Props

Prop	Type	Default	Description
`size`	`number`	`13`	Font size, px
`color`	`string`	`var(--text)`
`children`	`ReactNode`	—	Required

Also accepts every <span> attribute.

Guidelines

Every data value in Eidos is mono. Timestamps, IDs, counts, durations, percentages — if it's a value rather than prose, it belongs here.
Uses tabular figures, so digits line up in columns and a ticking number doesn't jitter.
size and color are open-ended and applied inline, for the cases where a value needs to stand out (a --success status, a larger figure).
For the label above the value, use MetaLabel.

Props​

Guidelines​

Props

Guidelines