TrendBadge

Compact period + trend arrow + percentage badge. Positive renders in --chart-positive, negative in --chart-negative.

Preview

Usage

import { TrendBadge } from '@ramtt/ui'

<TrendBadge period="4w" value={11.6} />
<TrendBadge period="12m" value={-3.4} />

Props

PropTypeDefaultDescription
period*stringTime-period label, e.g. "4w", "13w", "12m", "YTD"
value*numberPercentage change (formatted as +/− %)
classNamestringAdditional Tailwind classes