Components
Change Indicator
Shows whether a value went up or down, with a small mark and the change amount.
up 2.60%down 2.60%up 2.60%down 2.60%up 2.60%down 2.60%
Usage
import { ChangeIndicator } from "@sophic/portal-ui/components/ui/change-indicator";<ChangeIndicator variant={delta >= 0 ? "positive" : "negative"}>
{formatPercent(Math.abs(delta))}
</ChangeIndicator>The component renders exactly what you pass as children — formatting (sign, decimals, locale) stays in app code, like the Number Input.
Props
ChangeIndicator also accepts every native <span> attribute.
Prop
Type
Default
Changelog
- 3 August 2026 — Added
size="xs"(12px); instrument chart change rows use it. Full notes - 22 July 2026 — Soft rounded sort-up chevron; spacing before the value. Full notes
- 15 July 2026 — Added (status-ramp caret + value). Full notes