# Numeric

A figure in the numeric face with its qualifier in words, so numbers line up across a screen.

- **Use it for**: One figure with what it means beside it: a duration, a count, a delta.
- **Not for**: A labelled metric in a row of metrics. Try [Stat](https://unseenui.com/components/stat/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { Numeric } from '@stackunseen/ui';
import { Stat, ElapsedTime } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Numeric size="lg" value="11.4 h" qualifier="vs September" />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `qualifier` | `ReactNode` | What the figure means or compares to, in words: "vs September", "per run", "of 3 h". |
| `size` | `"sm" \| "lg" \| "md"` | lg for a card's headline figure, md for a row figure, sm for meta beside text. |
| `tone` | `"primary" \| "up" \| "down" \| "neutral"` | Colour that backs up a sign already in the text; neutral by default. |
| `value` (required) | `ReactNode` | A formatted figure from the application, such as "11.4 h" or "820 ms"; never computed here. |

## Keyboard

Inert content; it adds no tab stop.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [Sparkline](https://unseenui.com/components/sparkline/), [BarList](https://unseenui.com/components/bar-list/)

Page: https://unseenui.com/components/numeric/