Amount

Component for displaying monetary values

Usage

1import { Amount } from '@raystack/apsara'

Amount Props

Prop

Type

Examples

Basic

1<Flex gap={4}>
2  <Amount value={1299} />
3  <Amount value={1299} currency="EUR" locale="fr-FR" />
4  <Amount value={1299} hideDecimals />
5  <Amount value={1299} currencyDisplay="code" />
6  <Amount value={12.99} valueInMinorUnits={false} />
7  <Amount value={129999999} groupDigits />
8</Flex>

Currency Variants

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

valueInMinorUnits

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

locale

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

hideDecimals

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

currencyDisplay

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

groupDigits

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

Large Numbers

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

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

With Text

1<Flex gap={4}>
2  <Text>
3    Total: <Amount value={1299} />
4  </Text>
5  <Text>
6    Discount: <Amount value={-299} />
7  </Text>
8  <Text>
9    Tax: <Amount value={199} />
10  </Text>
11</Flex>