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.

18.6%-2.4%0.0%

Playground

Props in the URL.

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

Loading playground.

States

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

18.6%-2.4%0.0%

Default

Positive, negative, and neutral deltas.

18.6%-2.4%0.0%

Wash

Soft filled delta treatment.

Props

Name	Type	Default	Description
`value *`	`string`	-	Formatted delta text.
`intent`	`'positive' \| 'negative' \| 'neutral'`	`neutral`	Terminal, error, or neutral ink treatment.
`size`	`'small' \| 'medium' \| 'large' \| 'xlarge'`	`medium`	Delta type and icon scale.
`variant`	`'bare' \| 'wash'`	`bare`	Plain inline delta or soft tinted chip.
`basis`	`ReactNode`	-	Optional comparison basis text.