Overview
Stat
Stat component is used to display some statistics and numbers.
Overview
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
- Leading Icon: Optionally add a leading icon to support the type of statistical data.
- Stat content:Â Combination of overline, label and description text to set the context of stat. Label is often used for showing the numbers.
- Badge: Optionally add a badge to show positive, neutral or negative change in data.
Best Practices
- Use the label text to show the data.
- In case of a periodic change in data, accompany it with a badge component.
- 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.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more