Skip to content
EspañolEnglish
All components (204)

Amount

Surfaces · Amount

What it is and when to use it

A price, with its currency and in the format of the active language: 1234,56 € in Spanish, $1,234.56 in English. With a previous price it strikes it through, writes "Was" for those who cannot see it and says how much is saved.

When to use it

  • Product prices, cart lines, totals, installments: every amount that is shown.
  • Cents are dropped when they add nothing (20 € and not 20,00 €). withDecimals forces them even if the amount is round; withDecimals={false} always removes them, rounding.
  • before for a discount: it appears struck through and with the saving in a pill ("25%"), rounded down, because saying "-50%" when it is 49.6% is a lie. There is only an offer if before is greater than quantity. highlightOffer={false} removes the red from the figure.
  • currency with the ISO code of the currency (euros by default); freeText for zero ("Free"); perUnit for what goes after ("/month", "per kg").

When not to

  • An amount that is typed in: NumberField with format="currency".
  • A purchase summary with its lines and its total: OrderSummary.
  • A dashboard figure with its change: Stat.

Keyboard: it is not focusable.

Accessibility: no screen reader announces a strikethrough, so the previous price carries "Was:" written and hidden from view, and the pill says "You save 25%". The continuous text reads "14,90 € Was: 19,90 € You save 25%".

Fine-tuning: no variables of its own: it is adjusted with the classes amset-amount, amset-amount--sm/--md/--lg (the font size of the figure) and amset-amount--offer (the figure in --amset-error).

Context: it goes inside LocaleProvider (or AmsetProvider), which decides the decimal comma, the thousands separator and where the symbol goes.

What it looks like

sm · md · lg

€189€189€189

On sale

€14.90 Before: €19.90 You save 25 %

With unit

€9.90/month

No cost

Free

<Amount quantity={189} size="sm" />
<Amount quantity={189} />
<Amount quantity={189} size="lg" />
<Amount quantity={14.9} before={19.9} />
<Amount quantity={9.9} perUnit="/month" />
<Amount quantity={0} freeText="Free" />

Props

Import it with import { Amount } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
quantityrequirednumber—
beforenumberPrevious price. It appears struck through, together with the amount saved.
classNamestringMerged with the library classes; it does not replace them.
currencystringISO code. Euros by default.
freeTextstringText when the amount is zero. Without this, "€0" is rendered.
highlightOfferbooleanPaints it in sale red when there is a previous price.
perUnitstringWhat goes after: "/month", "per kg", "per unit".
sizeAmountSize—
withDecimalsbooleanBy default, cents show only if there are any. With `true` they always show, even when the amount is round (`20,00 €`); with `false` they never show and the amount is ROUNDED to the whole number (`14,90 €` is painted `15 €`, and so is the previous price): only for prices that are already round or where the cent does not matter.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: