Compact inline token reference — icon, symbol, live price, signed 24h change.
Anatomy
┌ surface, r-4, border outline-variant, p-6×10 ┐ │ ○20 JUP $0.8123 ▲ +4.2% │ │ │ │ │ └ signed 24h: color + │ │ │ │ └ price, .data-sm │ arrow + prefix from SIGN, │ │ └ symbol, mono 13/medium │ number from MAGNITUDE │ └ TokenIcon sm (20px) │ └─────────────────────────────────────────────────┘
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
symbol | string | — | Ticker; also the icon fallback initials. |
iconSrc | string? | — | Token logo; falls back to initials disc. |
price | string | — | Preformatted (e.g. "$0.8123") — formatting is the caller's job. |
change24h | number | — | Signed percent. Positive/zero → ▲ + buy; negative → ▼ − sell. |
className | string | — | Merged via cn. |
Motion
None. Prices update by value, not animation — terminal calm (DESIGN.md → Motion).
A11y
- · Direction is encoded by arrow + sign + color, not color alone, so it survives color-blindness and grayscale.
- · Sign discipline (guideline #5):
upis computed once from the signed value and drives icon/prefix/color together; the number usesMath.abs. NoMath.absleaks into the direction path, so a genuine −value can never render as+.