Price

Stable

A live price that tints briefly and shows an arrow for its last change.

Also known as price tag, quote, live price

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

₹2,480.50

function PriceFeedDemo() {
  const [running, setRunning] = useState(false);
  const [value, setValue] = useState(2480.5);
  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setValue((v) => Math.round((v + (Math.random() - 0.5) * 12) * 100) / 100), 1200);
    return () => clearInterval(id);
  }, [running]);
  return (
    <div className="flex items-center gap-4">
      <Price value={value} label="Sample price" className="text-title-sm leading-8 text-fg" />
      <Button variant="secondary" size="sm" onClick={() => setRunning(!running)}>{running ? "Stop feed" : "Start feed"}</Button>
    </div>
  );
}

A random walk every 1.2 seconds. Press Start to see the tint and the arrow.

Usage Code Design Accessibility

When to use it

Shows a number that keeps changing, and makes each change easy to notice without relying on colour.

Made of: Hidden label · Direction arrow · Number · Hidden live region (optional)

Use it for

A share price or rate that updates while the page is open.
A live balance or quote inside a card or a table row.
Any number where the last move up or down matters.

Not for

A fixed amount that does not change: use Money.
A headline number with a trend and a comparison: use StatTile.
The shape of change over time: use Sparkline.

Do and avoid

RELIANCE₹2,945.50+0.42%

Do. A price that moves, with its change shown in signs and arrows.

Invoice total₹4,200.00

Avoid. A fixed bill in ticker style looks like it might change.

Do

Give it a label so the number has a name.
Keep the arrow on. It is the cue that works without colour.
Set the currency and locale when the price is not in rupees.

Avoid

Do not use it for amounts that never change. Use Money.
Do not turn announce on for every row of a table.
Do not rely on the tint to show direction.

On a phone

It never wraps and keeps the number on one line, so make sure its container is wide enough for the longest price.
It has no hover or tap behaviour. The brief colour flash on a change is the same on a phone.

Properties

Prop	Type	Default	Description
valuerequired	number	none	The price. A value that is not a finite number shows an em dash.
currency	string	"INR"	ISO 4217 currency code.
locale	string	"en-IN"	Locale for grouping and symbols.
decimals	number	2	Number of decimal places.
showDirection	boolean	true	Shows an arrow before the number for the direction of the last change. It stays until the next change.
flash	boolean	true	Tints the background for about 600 ms on a change. Only when the person allows motion.
announce	boolean	false	Announces the new value in a hidden polite live region, at most once every 5 seconds.
label	string	none	Accessible name, such as Reliance price. Read before the number.
className	string	none	Classes for the span.

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

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.

first render: No arrow and no tint show until the value changes for the first time.
flashing: For about 600 ms after a change the background tints green or red. It is skipped with reduced motion.
direction held: The arrow for the last change stays until the next change.
not a number: A value that is not a finite number shows an em dash, never NaN.

Tokens

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

--up-soft
--down-soft
--up-fg
--down-fg
--dur-slow

Simulated feed

When to use it

Use it for

Not for

Do and avoid

Do

Avoid

On a phone

Works with

Properties

States

Tokens

Built in

What you need to do

Build your next AI screen with Tattva.