Amount

The Amount component formats and displays monetary values using Intl.NumberFormat, with automatic handling of currency codes, locales, and minor units. It inherits styling from parent Text components.

Basic usage

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

function ProductPrice() {
  return <Amount value={1299} />; // Shows as "$12.99"
}

Props

number | string

required

The monetary value to display. For large numbers (> 2^53), pass as string to maintain precision.When valueInMinorUnits is true: 1299 → “$12.99”When valueInMinorUnits is false: 12.99 → “$12.99”

string

default:"'USD'"

ISO 4217 currency code (e.g., ‘USD’, ‘EUR’, ‘JPY’, ‘GBP’).

boolean

default:"true"

Whether the value is in minor units (cents, paise, etc.). If true, the value will be converted based on the currency’s decimal places. If false, the value will be used as is.Examples:

USD: 1299 → $12.99 (2 decimals)
JPY: 1299 → ¥1,299 (0 decimals)
BHD: 1299 → BHD 1.299 (3 decimals)

string

default:"'en-US'"

BCP 47 language tag for localization (e.g., ‘en-US’, ‘de-DE’, ‘ja-JP’, ‘fr-FR’).

boolean

default:"false"

Truncates decimal places when true.

'symbol' | 'code' | 'name'

default:"'symbol'"

Currency display format:

'symbol': $12.99
'code': USD 12.99
'name': 12.99 US Dollars

number

Number of minimum fraction digits. Uses currency’s default when undefined.

number

Number of maximum fraction digits. Uses currency’s default when undefined.

boolean

default:"true"

Group digits with thousand separators.

Different currencies

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

function InternationalPrices() {
  return (
    <div>
      <Amount value={1299} currency="USD" /> {/* $12.99 */}
      <Amount value={1299} currency="EUR" /> {/* €12.99 */}
      <Amount value={1299} currency="GBP" /> {/* £12.99 */}
      <Amount value={1299} currency="JPY" /> {/* ¥1,299 */}
    </div>
  );
}

Localization

Format amounts according to different locales.

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

function LocalizedPrices() {
  return (
    <div>
      <Amount value={1299} currency="EUR" locale="en-US" /> {/* €12.99 */}
      <Amount value={1299} currency="EUR" locale="de-DE" /> {/* 12,99 € */}
      <Amount value={1299} currency="EUR" locale="fr-FR" /> {/* 12,99 € */}
    </div>
  );
}

Currency display formats

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

function CurrencyDisplayFormats() {
  return (
    <div>
      <Amount value={1299} currencyDisplay="symbol" /> {/* $12.99 */}
      <Amount value={1299} currencyDisplay="code" /> {/* USD 12.99 */}
      <Amount value={1299} currencyDisplay="name" /> {/* 12.99 US dollars */}
    </div>
  );
}

Hide decimals

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

function IntegerAmount() {
  return <Amount value={1299} hideDecimals />; // Shows as "$12"
}

Major units

Work with values already in major units (dollars, euros, etc.).

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

function MajorUnitAmount() {
  return <Amount value={12.99} valueInMinorUnits={false} />; // Shows as "$12.99"
}

Large numbers

For precision with large numbers, pass values as strings.

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

function LargeAmount() {
  return (
    <Amount 
      value="999999999999999" 
      valueInMinorUnits={false}
      groupDigits 
    /> // Shows as "$999,999,999,999,999.00"
  );
}

Within text

The Amount component inherits styling from parent Text components.

import { Amount, Text } from '@raystack/apsara';

function PriceDisplay() {
  return (
    <Text size="large" variant="emphasis">
      Total: <Amount value={1299} />
    </Text>
  );
}

Text - The Amount component inherits styling from Text
Badge - Display amounts in status badges

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Basic usage

Props

Different currencies

Localization

Currency display formats

Hide decimals

Major units

Large numbers

Within text

​Basic usage

​Props

​Different currencies

​Localization

​Currency display formats

​Hide decimals

​Major units

​Large numbers

​Within text

​Related components

Basic usage

Props

Different currencies

Localization

Currency display formats

Hide decimals

Major units

Large numbers

Within text

Related components