Last modified: August 22, 2025
The Statistics component renders a visual spotlight of one or more data points. Includes the StatisticsItem and StatisticsTrend subcomponents.
design-guidelines-statistics
  1. StatisticItem label: the statisticItem’s label text.
  2. StatisticItem number: the statisticItem’s primary number.
  3. StatisticTrend value: the percentage trend value.
  4. StatisticTrend direction: the direction if the trend arrow (up or down).
import {
  Statistics,
  StatisticsItem,
  StatisticsTrend,
} from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <Statistics>
      <StatisticsItem label="Item A Sales" number="10000">
        <StatisticsTrend direction="decrease" value="200%" />
      </StatisticsItem>
      <StatisticsItem label="Item B Sales" number="100000">
        <StatisticsTrend direction="increase" value="100%" />
      </StatisticsItem>
    </Statistics>
  );
};

​
StatisticsItem props

PropTypeDescription
idStringThe statistic item’s unique identifier.
labelStringThe item’s label.
numberString | numberThe string to be displayed as the item’s primary number.

​
StatisticsTrend props

PropTypeDescription
direction'increase' (default) | 'decrease'The direction of the trend arrow.
valueStringThe text to be displayed as the trend value.
color'red' | 'green'The color of the trend arrow.

​
Variants

In StatisticsTrend components, use the direction prop to describe whether the data is trend upwards or downwards.
  • increase: for additions or positive progression for a given time period.
design-guidelines-increase-trend
  • decrease: for subtractions or negative progression for a given time period.
design-guidelines-decrease-trend
Note that the positive or negative movement of a given statistic is intended solely to represent the increase or decrease in numerical value. Be mindful of how these movements can communicate sentiment. For example, a decrease in support volume can be a net positive, which can be confusing when represented by a red, downward arrow.

​
Usage examples

  • Calling out the progress of quarterly sales for a company.
  • Monitoring the amount of traffic and social media engagement that a contact has for the month.

​
Guidelines

  • DO: keep statistics labels short and concise.
  • DO: place statistics components towards the top of a card when possible to enable users to more easily scan information without scrolling.
  • DON’T: include more than three statistics components per card if possible.
  • DON’T: use more than four statistics components side by side.
  • DON’T: include sensitive data that you don’t want all users to see.