Trend Chip

Preview

About

A small pill that pairs an up/down arrow with a value (typically a percentage), colored in a soft tone based on direction. Built for stat rows, next to a numeric value, signaling whether the number moved for better or worse. Purely presentational: the label should already come formatted (e.g. "12.4%").

• label: the displayed text (already formatted by the caller).
• direction: up (upward arrow, success tone), down (downward arrow, danger tone), or flat (no arrow, neutral tone).
• size: sm (20), md (24, default), or lg (32) height — the same size scale as KasyTag.
• semanticLabel: alternative accessibility label (by default generates "Up/Down" plus the label, or just the label when flat).

Last updated on 08/23/2026