Trend Badge

Beta

The change next to a figure: up in green, down in red, flat in gray, with an arrow that never mirrors.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add trend-badge
Also works with shadcn: npx shadcn@latest add @ritla/trend-badge
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

trend-badge.tsx

import { TrendBadge } from "@/components/ui/trend-badge";<TrendBadge value={12.4} />

Prop	Type	Default	Description
`value`	`number`	None	The change in percent: 12.4 reads “+12.4%”. Its sign picks the direction.
`children`	`ReactNode`	None	Other text in place of the percent (“+JOD 214.670”).
`direction`	`"up" \| "down" \| "flat"`	None	Figma's Direction. Default: from the sign of `value`.
`size`	`"sm" \| "md"`	`"sm"`	Figma's Size: sm in rows and tiles, md next to a display figure.
`variant`	`"soft" \| "plain"`	`"soft"`	Figma's Style: Soft is a tinted pill, Plain is text only for dense rows.
`fractionDigits`	`number`	`1`	Digits after the point.

Colour is never the only signal: the arrow and the sign say the same, and the badge sits next to words like “vs last month”.
The arrow is decorative; the text “+12.4%” is what is read.

Up and down arrows point up and down in both directions; the change “+12.4%” stays one left-to-right run, sign first.

Numerals: The percent follows numerals on RitlaProvider: +12.4% or +١٢٫٤٪.
Arabic typography: numeric-12 Regular (sm) or numeric-14 Medium (md), with tabular figures.