Metrics & Status

TrendBadge

Displays percentage change with an arrow and a tone color.

Props

TrendBadge extends HTMLAttributes<HTMLSpanElement>.

TrendBadgeProps props

Prop	Type	Default	Description
`delta`	`number`	—	Signed percentage change. Sign picks the arrow direction.
`positiveIsGood`	`boolean`	`true`	Whether an increase is good (revenue) or bad (error rate).
`format`	`(delta: number) => string`	—	Formats the number. Default: +4.2%.
`label`	`string`	—	Dim comparison label after the number (e.g. 'vs last week').

+12.5%

TrendBadge positive

-5.3%

TrendBadge negative

0.0%

TrendBadge flat

+8.1%

TrendBadge positiveIsGood false

+12.5%vs last month-5.3%vs yesterday

TrendBadge with label

ImportTSX

import { TrendBadge } from "@solarius/onset";
import type { TrendBadgeProps } from "@solarius/onset";