# Delta

A signed change against a base, coloured good or bad by which direction is better.

Delta shows how far a number moved: +6, −2 with a true minus sign, or ±0 when nothing changed. Its tone is worked out, not chosen; it is Ok when the change is good, Bad when it is bad and Neutral when there is none. Set fewer_is_better for errors, latency and cost, where going down is the good direction.

## Use it

Web:

```rust
use ocean_ui_core::Delta;
Delta { by: -2, against: 14, fewer_is_better: true }
```

Native:

```rust
use ocean_ui_native::{Show, core::Delta};
Delta { by: 6, against: 24, fewer_is_better: false }.show(ui);
```

Cargo feature `base`; since 2026-10-29.
In App UI the `kpis` block draws it ([kpis](/ui/blocks/kpis.md)).

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `by` | `i64` | `—` | The change; positive is up and negative is down. |
| `against` | `i64` | `—` | The base the change is measured against; percent() is None when it is 0. |
| `fewer_is_better` | `bool` | `—` | Down is the good direction, as for errors and latency. |

On the Mac: ![Delta, dark](/ui/native/delta-dark.png) ![Delta, light](/ui/native/delta-light.png)

## Examples

### More is better

Up is good for revenue; the words are its label.

```rust
Delta { by: 12, against: 100, fewer_is_better: false }.html(out);
Delta { by: -8, against: 100, fewer_is_better: false }.html(out);
```

### Fewer is better

For errors and waiting, down is the good direction.

```rust
Delta { by: -14, against: 60, fewer_is_better: true }.html(out);
Delta { by: 5, against: 60, fewer_is_better: true }.html(out);
```

### No change

Plus or minus zero, neutral.

```rust
Delta { by: 0, against: 42, fewer_is_better: false }
```

## Accessibility

- The delta is role="img" with words in its aria-label, such as "6 more than 24" or "2 fewer than 14".
- The same words show on hover through the title attribute.
- Its colour follows the direction and fewer_is_better, and the words carry the meaning without it.

## Related

- [KPI](/ui/components/kpi.md)
- [Spark](/ui/components/spark.md)
- [Badge](/ui/components/badge.md)