Skip to content
EspañolEnglish
All components (244)

Animated number

Data · AnimatedNumber

What it is and when to use it

A number that travels from the previous value to the new one: the order counter on a dashboard that goes up when one arrives, the cart amount when adding, the followers on a profile.

When to use it

  • A number that changes in front of whoever is looking and should be seen to change, not just to be different.
  • format takes the options of Intl.NumberFormat: { style: 'currency', currency: 'EUR' } for an amount, { style: 'percent' } for a percentage, { maximumFractionDigits: 0 } for a quantity.
  • duration is how long the journey takes; 0 changes it at once.

When not to

  • A number painted once that does not change: Text or Stat, which also carries its trend.
  • A countdown: Countdown.

Keyboard: it is not interactive.

Accessibility: what moves is hidden from the screen reader, which receives the final number written once (with label in front: "Orders today: 1204"), and not forty intermediate numbers. With prefers-reduced-motion the number changes at once.

Fine appearance: no variables of its own; the digits are tabular (amset-counter, amset-counter__digits) so the text next to them does not jump.

What it looks like

Sales this month: €12,480

<AnimatedNumber
  value={ventas}
  format={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }}
  label="Sales this month"
/>

Props

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

PropTypeWhat it does
valuerequirednumberThe number. Each change travels from the previous one.
classNamestringMerged with the library classes; it does not replace them.
durationnumberHow long the journey lasts, in milliseconds. `0` changes the number at once, which is also what happens if the system asks for less motion.
formatIntl.NumberFormatOptionsHow it is written: the options of `Intl.NumberFormat` (`{ style: 'currency', currency: 'EUR' }`, `{ maximumFractionDigits: 0 }`...). Without them, the number of the language.
labelstringWhat the number is, for whoever hears it without seeing what is around it: "Orders today".

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: