Apsara

Documentation

Playground

Icons

AmountnewNEW

Component for displaying monetary values

Usage

import { Amount } from '@raystack/apsara/v1'
 
<Amount value={1299} />
<Amount value={1299} currency="EUR" locale="fr-FR" />
<Amount value="999999999999999" />

Amount Props

PropTypeDefault
value
string | number
0
currency
string
'USD'
valueInMinorUnits
boolean
true
locale
string
'en-US'
hideDecimals
boolean
false
currencyDisplay
"symbol" | "code" | "name"
'symbol'
minimumFractionDigits
number
undefined (uses currency's default)
maximumFractionDigits
number
undefined (uses currency's default)
groupDigits
boolean
true

Examples

Basic

<Flex gap={4}>
  <Amount value={1299} />
  <Amount value={1299} currency="EUR" locale="fr-FR" />
  <Amount value={1299} hideDecimals />
  <Amount value={1299} currencyDisplay="code" />
  <Amount value={12.99} valueInMinorUnits={false} />
  <Amount value={129999999} groupDigits />
</Flex>

Currency Variants

<Flex gap={4}>
  <Amount value={1299} currency="JPY" />
  <Amount value={1299} currency="BHD" />
  <Amount value={1299} currency="INR" />
  <Amount value={1234} minimumFractionDigits={3} maximumFractionDigits={3} />
</Flex>

valueInMinorUnits

<Flex gap={4}>
  <Amount value={1299} valueInMinorUnits /> {/* $12.99 */}
  <Amount value={12.99} valueInMinorUnits={false} /> {/* $12.99 */}
</Flex>

locale

<Flex gap={4}>
  <Amount value={1299} locale="en-US" /> {/* $12.99 */}
  <Amount value={1299} currency="EUR" locale="de-DE" /> {/* 12,99 € */}
  <Amount value={1299} currency="JPY" locale="ja-JP" /> {/* ￥1,299 */}
</Flex>

hideDecimals

<Flex gap={4}>
  <Amount value={1299} hideDecimals /> {/* $12 */}
  <Amount value={1234} hideDecimals /> {/* $12 */}
</Flex>

currencyDisplay

<Flex gap={4}>
  <Amount value={1299} currencyDisplay="symbol" /> {/* $12.99 */}
  <Amount value={1299} currencyDisplay="code" /> {/* USD 12.99 */}
  <Amount value={1299} currencyDisplay="name" /> {/* 12.99 US dollars */}
</Flex>

groupDigits

<Flex gap={4}>
  <Amount value={123456789} groupDigits /> {/* $1,234,567.89 */}
  <Amount value={123456789} groupDigits={false} /> {/* $1234567.89 */}
</Flex>

Large Numbers

For numbers larger than JavaScript's safe integer limit (2^53 - 1), pass the value as a string to maintain precision.

<Flex gap={4}>
  {/* For large numbers, use string to maintain precision */}
  <Amount value="999999999999999" /> {/* $9,999,999,999,999.99 */}
  <Amount
    value="10000100091636935"
    valueInMinorUnits={false}
    hideDecimals
  />{" "}
  {/* $10,000,100,091,636,935 */}
  {/* Numbers exceeding safe integer limit will show warning in console */}
  <Amount value={999999999999999} /> {/* Will show warning */}
</Flex>

With Text

<Flex gap={4}>
  <Text>
    Total: <Amount value={1299} />
  </Text>
  <Text>
    Discount: <Amount value={-299} />
  </Text>
  <Text>
    Tax: <Amount value={199} />
  </Text>
</Flex>

Previous

Getting Started

Next

Announcement Bar

On this page