Price change
A signed delta with a direction arrow and semantic tone — the recurring ▲ +14.56% / ▼ −12.04% indicator in finance UIs. Colour is never the sole signal: the arrow and the sign in the text carry direction too. Figures are tabular so columns of them line up.
Directions
+14.56%-12.04%0.00%
<PriceChange value={14.56} /><PriceChange value={-12.04} /><PriceChange value={0} />Positive rides on success, negative on danger, flat on the neutral tertiary — with the arrow and the sign redundantly labelling the direction.
Custom format
+$20,837.9
<PriceChange value={20837.9} format={(v) => `${v > 0 ? '+' : ''}$${v.toLocaleString('en-US', { maximumFractionDigits: 2 })}`}/>The default format is a signed percentage; supply format for absolute amounts or other units.
Without arrow
+3.45%-0.40%
<PriceChange value={3.45} showArrow={false} /><PriceChange value={-0.4} showArrow={false} />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | — | The change. Sign decides tone and arrow. |
format | (value: number) => string | n => `${n>0?'+':''}${n.toFixed(2)}%` | Format the displayed value. |
showArrow | boolean | true | Hide the direction arrow when the label already carries it. |