Primitive

Delta

Compact change indicator using terminal, error, or neutral ink.

Delta is a numeric modifier. Keep the value concise and include basis only when the comparison would otherwise be unclear.
data
DOM renderImage render
DeltaDefault
+18.6%-2.4%0.0%

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Positive, negative, and neutral deltas.
+18.6%-2.4%0.0%
Render state

Basis

Deltas with comparison basis labels.
+18.6%vs last week-2.4%over budget0.0%unchanged
Render state

Density

Delta density scale for metric lockups.
+4.2%+9.8%+18.6%+24.1%
Render state

Wash

Soft filled delta treatment.
+18.6%-2.4%0.0%
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
value *string-Formatted delta text.
intent'positive' | 'negative' | 'neutral'neutralTerminal, error, or neutral ink treatment.
density'compact' | 'comfortable' | 'editorial' | 'display'comfortableDelta type and icon rhythm.
hierarchy'plain' | 'wash'plainPlain inline delta or soft tinted chip.
basisReactNode-Optional comparison basis text.