MoneyText

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

In Turkish the currency follows the number: 1.234,56 ₺. display picks a symbol, code or name; currency sets another currency.

₺1,234.56₺1,234.56TRY 1,234.56€1,234.56

LightDark

Copy code

import { MoneyText, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col items-start gap-md">
        <MoneyText amount={123456n} size="lg" />
        <MoneyText amount="123456" />
        <MoneyText amount={123456n} display="code" />
        <MoneyText amount={123456n} currency="EUR" />
      </div>
    </Provider>
  );
}

Size and tone

fraction="subtle" sets the fraction smaller; tone="sign" writes credits green and debits red and always shows the sign.

Total

₺123,456.78

Change

+₺25.00-₺25.00

LightDark

Copy code

import { MoneyText, Provider } from '@bigbang/ui';

export default function Tones() {
  return (
    <Provider locale="en-GB">
      <dl className="grid grid-cols-[auto_1fr] items-baseline gap-x-xl gap-y-md">
        <dt className="type-label-sm text-fg-subtle">Total</dt>
        <dd>
          <MoneyText amount={12345678n} size="xl" fraction="subtle" />
        </dd>
        <dt className="type-label-sm text-fg-subtle">Change</dt>
        <dd className="flex gap-lg">
          <MoneyText amount={2500n} tone="sign" />
          <MoneyText amount={-2500n} tone="sign" />
        </dd>
      </dl>
    </Provider>
  );
}

Light and dark mode

The tone colours come from the text tokens.

Light

Total

₺123,456.78

Change

+₺25.00-₺25.00

Dark

Total

₺123,456.78

Change

+₺25.00-₺25.00

Copy code

import { MoneyText, Provider } from '@bigbang/ui';

export default function Tones() {
  return (
    <Provider locale="en-GB">
      <dl className="grid grid-cols-[auto_1fr] items-baseline gap-x-xl gap-y-md">
        <dt className="type-label-sm text-fg-subtle">Total</dt>
        <dd>
          <MoneyText amount={12345678n} size="xl" fraction="subtle" />
        </dd>
        <dt className="type-label-sm text-fg-subtle">Change</dt>
        <dd className="flex gap-lg">
          <MoneyText amount={2500n} tone="sign" />
          <MoneyText amount={-2500n} tone="sign" />
        </dd>
      </dl>
    </Provider>
  );
}