# Delta

> A change with an arrow, coloured by whether it is good or bad

Status: beta. Added in Components 2.15.0. Updated in Components 2.16.0, 20 Oct 2026.

A change with an arrow, coloured by whether it is good or bad.

## Import

```tsx
import { Delta } from '@oztix/roadie-components/delta'
```

## Examples

### Default

```tsx
<Delta value={214} />
```

### Formats

```tsx
<Delta value={0.04} format='percent' />
<Delta value={-9} format='points' />
<Delta value={1250} format='currency' />
<Delta value={48200} format='compact' />
```

### When lower is better

```tsx
<Delta value={-0.003} format='percent' goodWhen='down' />
<Delta value={12} goodWhen='down' />
<Delta value={6} goodWhen='neither' />
```

### Against a baseline

```tsx
<Delta value={112} format='index' baseline={100} context='pace against the average show' />
```

### States

```tsx
{/* No change */}
<Delta value={0} format='percent' />
{/* Not available */}
<Delta value={Number.NaN} format='points' />
```

## Guidelines

- Use `Delta` beside a value or in a sentence. In a tile, pass `delta` to [StatTile](https://ticketsolutionsptyltd.github.io/roadie/charts/stat-tile.md) or [DataCard](https://ticketsolutionsptyltd.github.io/roadie/charts/data-card.md), and in a [DataTable](https://ticketsolutionsptyltd.github.io/roadie/charts/data-table.md), give the column `kind: 'delta'`. Both render one for you.
- `value` is the change itself, and the arrow shows its sign. Pass `baseline` when the number to show is a level, such as a pace index of 112 against 100.
- Set `goodWhen='down'` for numbers where falling is good, such as refunds, and `goodWhen='neither'` when a change has no better direction. Neither colours it grey.
- Say what the change compares against in `context` or nearby text. The delta stays short.

## Accessibility

- The change reads as a sentence, such as "up 214, better", so colour is never the only cue. `context` is added to the end, such as "down 4%, worse, on last week".
- The arrow and the shown text are hidden from screen readers, because the sentence already says them.
- A non-finite value, such as `NaN`, shows and reads as "Not available" rather than a number.

## API reference

### Delta

```tsx
import { Delta } from '@oztix/roadie-components/delta'
```

- `value`: `number`. Required.
- `format`: `"number" | "compact" | "percent" | "currency" | "compactCurrency" | "points" | "index"`. Defaults to `number`.
- `goodWhen`: `"up" | "down" | "neither"`. Defaults to `up`.
- `baseline`: `number`. Show `value` itself and read direction from `value - baseline` (pace index 112 vs 100).
- `context`: `string`. Spoken suffix, e.g. "on last week".

Docs updated 10 Oct 2026.