TrendBadge

stable

Directional trend indicator with semantic coloring — shows up/down/flat movement with optional percentage value

import { TrendBadge } from "@nodus/design-system/finance"

↑+3.2%↓-1.1%→0.0%↑-5.4%

Loading demo…

Props

Prop	Type	Default	Description
`direction`req	`'up' \| 'down' \| 'flat'`	—	Trend direction
`value`	`number`	—	Change percentage
`showIcon`	`boolean`	—	Show directional arrow icon
`formatValue`	`(v: number) => string`	—	Custom value formatter

directionrequired

Type 'up' | 'down' | 'flat'Default —

Trend direction

value

Type numberDefault —

Change percentage

showIcon

Type booleanDefault —

Show directional arrow icon

formatValue

Type (v: number) => stringDefault —

Custom value formatter

MobileWorks As-Is

Design Rationale

This component was designed to express:

Change/delta display with severity-based coloring for P&L and returns

Compliance/regulatory status indicator for filings, KYC, and attestations

Regulatory compliance ratio bar with threshold marker — visualizes LCR, NSFR, leverage ratios against minimum requirements

Was this helpful?