DataArrow

Tiny 16–20px arrow pill for trend, change, and direction visuals. Used in tables, dashboards, and KPI displays where a small inline glyph communicates "went up / went down / no change / not applicable" at a glance.

<DataArrow direction="up" variant="success" />
<DataArrow direction="down" variant="error" />
<DataArrow direction="neutral" />
<DataArrow direction="na" />

For automatic variant selection from a numeric delta, see ChangeArrow below.

Always pair with a text label

A row of unlabelled arrow pills is ambiguous and inaccessible — colour and direction alone don't communicate magnitude or what the value represents. Pair every DataArrow with a numeric value, KPI label, or tooltip so the meaning survives without colour.

Two semantic uses

DataArrow covers two different signals — pick by what the value represents, not by the colour you want.

Use	What it shows	Variants you'll reach for
Risk / health indicator	A position on a spectrum (very-low → very-high, plus N/A)	success, warning, error, neutral, na
Directional change	Whether something went up or down, and by how much	direction="up" / "down" / "neutral" paired with a semantic colour

Don't use directional arrows to imply good or bad — direction is just direction. "Energy use went up" is bad in one context and good in another. If the meaning is "did this regress or improve", use ChangeArrow (which picks colour from the delta) and let the label carry the rest.

Variants

<DataArrow direction="up" variant="success" />
<DataArrow direction="down" variant="error" />
<DataArrow direction="up" variant="warning" />
<DataArrow direction="down" variant="neutral" />

Intensities

The intensity prop controls how prominently the arrow reads — useful when the same arrow appears in dense tables (weak or naked) vs prominent KPI tiles (strong).

strong

weak

naked

<DataArrow direction="up" variant="success" intensity="strong" />
<DataArrow direction="up" variant="success" intensity="weak" />
<DataArrow direction="up" variant="success" intensity="naked" />

Diagonal

Pass diagonal to use diagonal up-right / down-right arrows instead of the straight up/down ones — fitting for trend deltas where the value also changed over time.

<DataArrow direction="up" variant="success" diagonal />
<DataArrow direction="down" variant="error" diagonal />

DataArrow — Props

Prop	Type	Default	Description
direction	'up' | 'down' | 'neutral' | 'na'	required	Arrow direction. na renders a minus glyph.
variant	'success' | 'error' | 'warning' | 'neutral'	'neutral'	Color treatment.
intensity	'strong' | 'weak' | 'naked'	'strong'	Background prominence. naked removes the chip background entirely.
diagonal	boolean	false	Use diagonal up-right / down-right glyphs for up/down.

---

ChangeArrow

Convenience wrapper that picks DataArrow's direction, variant, intensity, and diagonal automatically from a numeric value against a threshold map. Use this when you have a delta or percentage and want consistent semantic styling without computing it yourself.

-120

-30

-5

0

5

30

120

<ChangeArrow :value="-30" />
<ChangeArrow :value="0" />
<ChangeArrow :value="30" />

Inverting "good vs bad"

By default, positive values are styled as success and negative as error. For metrics where positive change is bad (e.g. emissions going up, energy consumption increasing), pass is-positive-bad to invert.

<ChangeArrow :value="15" is-positive-bad />
<!-- Renders an up arrow with error styling — emissions went up, that's bad -->

Custom thresholds

Override the threshold map to fit your metric. The defaults express change as a percentage (low=0, medium=10, high=50, max=100).

<ChangeArrow
  :value="emissionsChange"
  :thresholds="{ low: 0, medium: 5, high: 25, max: 50 }"
  is-positive-bad
/>

ChangeArrow — Props

Prop	Type	Default	Description
value	number	required	The numeric delta. NaN renders the na direction.
thresholds	{ low: number; medium: number; high: number; max: number }	{ low: 0, medium: 10, high: 50, max: 100 }	Cutoffs (in absolute value) that drive variant + intensity.
isPositiveBad	boolean	false	Invert the success/error mapping — useful for metrics where a higher value is worse.