PriceChange

Stable

A signed change with an arrow, as an amount, a percent or both.

Also known as delta, change percent, trend

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Up +₹32.50 (+1.14%) Down −₹18.40 (−0.47%) Unchanged No change

<p className="flex flex-wrap gap-4 text-body leading-5"><PriceChange change={32.5} percent={1.14} /> <PriceChange change={-18.4} percent={-0.47} /> <PriceChange change={0} percent={0} flatLabel="No change" /></p>

The arrow and the sign show the direction. Zero shows a dash and a label.

Usage Code Design Accessibility

When to use it

Shows the size and direction of a move in a way that does not depend on colour.

Made of: Hidden direction word · Arrow · Sign · Amount · Percent

Use it for

The change beside a price in a list or a ticker.
A day change in a table column.
A percent move on its own.

Not for

A headline number with its comparison text: use StatTile.
An amount that is not a change: use Money.
Many changes in rows and columns: use DataTable.

Do and avoid

+₹12.40 (+0.42%)−₹18.20 (−0.44%)

Do. An arrow and a sign show the direction, not just the color.

12.4018.20

Avoid. Color alone hides which way it moved from many people.

Do

Pass the real signed change and let the part add the sign.
Use percent only in tight spaces.
Set flatLabel when a zero change needs a word.

Avoid

Do not show a change as colour alone.
Do not type the arrow or the minus yourself.
Do not use it for a total. Use Money.

On a phone

It never wraps and keeps the arrow and the numbers on one line, so make sure its container is wide enough.
It has no hover or tap behaviour, and the direction is shown with an arrow and words, not colour alone.

Properties

Prop	Type	Default	Description
changerequired	number	none	The change as an absolute amount. Its sign sets the direction. If it is 0, the sign of percent is used.
percent	number	none	The change in percent, for example 1.14. Shown with a percent sign.
currency	string	"INR"	ISO 4217 currency code for the amount.
locale	string	"en-IN"	Locale for grouping and symbols.
decimals	number	2	Decimal places for the amount and the percent.
format	"both" \| "percent" \| "amount"	"both"	Which numbers to show. Both shows the amount and the percent in brackets.
flatLabel	string	none	Shown instead of the numbers when the change is flat, next to a dash.
className	string	none	Classes for the span.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one PriceChange switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.

PriceChange in Figma: each property and the React prop it sets
Figma property	React	Values
Format	`format`	Both, Percent, Amount

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

flat: When both numbers are zero, a dash replaces the arrow and flatLabel replaces the numbers if it is set.
not a number: If no shown number is finite, the part shows an em dash.

Tokens

Change one of these and every part that uses it follows.

--up-fg
--down-fg
--fg-muted

Up, down and flat