Skip to contentSkip to navigation
DocsDocs

AnimatedNumber

A number that rolls to its new value, so a change made elsewhere is noticed.

StableSince 1.0.0
On this page

Overview

Show code, ShowResults.tsx

Variants

A formatted value

The number can be written in any format, such as a currency. By default it is written as the application's language writes numbers.

Show code, CustomFormat.tsx

Anatomy

Caught as a new value rolls in.

  1. Window

  2. Value

Show code, AnimatedNumberAnatomy.tsx

While the number changes, the value it changed from rolls out as the new one rolls in.

Behaviour

Rolling to a new value

AnimatedNumber rolls up as the value grows and down as it shrinks.

Reduced motion

With a reduced-motion preference, the old value fades out as the new one fades in.

Rules

Roll one number at a time, with its words beside it.

Use it when

  • A count that changes as people choose, such as results in a button's label
  • A figure that follows a setting, such as seats left or a price per period
DoRoll the one number a choice changes.
Show code, SeatsLeft.tsx
Don’tSeveral numbers rolling at once: none of them draws the eye.
Show code, EveryNumberRolls.tsx

Words

Keep the words in the same sentence as the number, and match them to it: 1 seat, 3 seats.

Related

  • A count that doesn’t change while people look at it: plain text.

  • A compact count beside a label, such as unread messages.

  • A headline figure with its label and trend, such as on a dashboard.