TrendChip

Compact change indicator: arrow, signed percent and a good/bad tone, never color alone.

Import

import { TrendChip } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/trend-chip.

Usage

<TrendChip value={12.5} label="vs. semana pasada" />

Props

Prop	Type	Default	Description
value *	number		Change in percent, e.g. 12.5 for +12.5%.
invert	boolean	false	Lower is better (cancelaciones, mermas): a drop reads as favorable.
epsilon	number	0	Changes whose absolute value is within this stay “flat”.
label	string		Text after the number, e.g. “vs. semana pasada”.
locale	string

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Down
• Flat
• Lower Is Better
• Narrow
• Brutal Preset

Source

packages/ui/src/atoms/trend-chip/trend-chip.tsx