Datapoint
Pilot

View source on GitHub

Datapoint displays at-a-glance data for a user to quickly view key metrics.

⚠️ Please note: Datapoint is not currently supported in dark mode.

Total impressions
2.34M
30%

Props

Component props
Name
Type
Default
title
Required
string
-

The header for the component.

value
Required
string
-

The main datapoint value (e.g., 1.23M)

size
"md" | "lg"
"md"

Used to set the size of the datapoint. See the size variant to learn more.

tooltipText
string
-

Contextual information displayed in a tooltip to describe the Datapoint. See the tooltipText variant to learn more.

trend
{| accessibilityLabel: string, value: number |}
-

Object detailing the trend value (change in time - e.g., +30%), and accessibilityLabel to describe the trend's icon (e.g., "Trending up"). See the trend variant to learn more.

trendSentiment
"good" | "bad" | "neutral" | "auto"
"auto"

A visual indicator whether the trend is considered "good", "bad" or "neutral". By setting trendSentiment to auto, a positive trend will be considered "good", a negative trend will be considered "bad" and a trend of zero will be considered "neutral". See the trendSentiment variant to learn more.

Usage guidelines

When to Use
  • To display a single numerical metric.
When Not to Use
  • When the information to convey is qualitative (e.g., “In Progress” or “Healthy”). Use Status instead.
  • When the Datapoint’s metric/value is not clear or understandable in isolation.

Localization

Be sure to localize the title, tooltipText and trend accessibilityLabel props. Note that localization can lengthen text by 20 to 30 percent.

Variants

Size

Spend
$1.23M
size=md
Spend
$1.23M
size=lg

Trend

Use trend to display the change in the value of a Datapoint over time. Make sure to provide an accessibilityLabel when the trend is above or below zero.

Pin clicks
1.23k
12%
Saves
123
0%
Total impressions
1.23M
5%

Trend sentiment

By default, a positive trend will be considered "good" (displayed as a green trend), a negative trend "bad" (displayed as a red trend) and a trend of 0 "neutral" (displayed as a dark gray trend). However, the trendSentiment property can be used to explicitly set whether the trend is considered "good", "bad" or "neutral", as demonstrated below.

Bounce rate
86.3%
29%
Conversion falloffs
92
10%
Spend
$19.3k
4%

Tooltip text

The tooltipText prop is intended to provide the user context, detail and/or framing for a Datapoint through a Tooltip.

Spend
$5.7k
Edit page on GitHub