Stat component is used to display some statistics and numbers.


The stat component is mainly used to display statistics and their change. It comes with 3 different sizes and should be used depending on your priority. You can show statistics such as change in price, stocks, or number of subscriber count etc.

When to use

  • When you have numerical data to be displayed in concise and easy to digest manner.
  • When you want to show live or periodical data change.


Anatomy of stat
  1. Leading Icon: Optionally add a leading icon to support the type of statistical data.
  2. Stat content: Combination of overline, label and description text to set the context of stat. Label is often used for showing the numbers.
  3. Badge: Optionally add a badge to show positive, neutral or negative change in data.

Best Practices

  1. Use the label text to show the data.
  2. In case of a periodic change in data, accompany it with a badge component.
  3. Always set a context to the data you are showing. It can be shown via the Description text field.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.