Skip to content
Tattva

Money

Stable

An amount that code worked out, in mono with tabular figures, in rupees by default.

Also known as currency, amount, price format

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

Rupees

Refund of ₹2,34,000 and a fee of ₹2,340.50.

Formatted with the en-IN locale, so groups follow the lakh pattern.

UsageCodeDesignAccessibility

When to use it

Marks a figure as something code counted. Mono and a dotted underline say it is exact, and a hidden note tells screen readers the same.

Made of: Arrow (optional) · Sign · Amount · Hidden note (optional)

Use it for

  • Refund amounts, totals and balances.
  • A change in an amount, with an arrow and a sign.
  • A date or id that code computed (use Mono).

Not for

Do and avoid

Refund due: ₹2,340. Calculated by code

Do. Mono and a dotted line mark a sum that code counted.

The AI thinks you may get about ₹2,300. Calculated by code back.

Avoid. Marking an AI guess as counted makes it look exact.

Do

  • Use it for every figure that code calculated.
  • Pass the currency and locale when the money is not rupees.
  • Use Mono for dates and ids that were computed.

Avoid

  • Do not use it for numbers the AI guessed.
  • Do not use direction colours without the arrow and sign. Direction adds both for you.
  • Do not print a raw number next to a currency sign yourself.

On a phone

  • It is plain text in a monospace font with no fixed width, so it takes the size of the text around it.
  • Use the compact prop for tight spaces, which gives lakh and crore forms for INR.
  • The note that code calculated the amount is read by screen readers only, so a phone shows just the dotted underline.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started