Data Point

Gives users an at-a-glance view of an important piece of information. Useful for overview pages or as a summary of what’s in a larger dataset like a table. A title and value are always shown together — title first. An optional visual indicator (badge or progress bar) can be added to communicate change or progress.

RSVPs1,240
+12 this week
Rate84%
84%
Sponsorship£24,500
-8% vs target
Events7

preview

RSVPs1,240
+12 this week

props

PropTypeDefaultDescription
titlestringrequiredLabel displayed above the value. Always shown first — do not reverse the order.
valuestringrequiredThe primary data value shown prominently. Accepts any string — numbers, currency, percentages, or short text.
visualIndicatorReactNode—Optional visual indicator rendered below the value. Pass a Badge or ProgressBar component. Omit to hide.

usage

Data points work best in groups of two or more on overview or dashboard pages. They provide a scannable summary at a glance — if the user needs more detail, the data point should live on a surface that reveals it rather than navigating away.

When to use

  • On overview or dashboard pages to give users a headline view of key metrics
  • As a summary alongside a larger dataset — e.g. totals above a table
  • When the value updates over time and the trend matters to the user
  • Inside an interactive card that reveals a tooltip or drawer with more detail

Do not use

  • With value before title — title must always precede the value
  • As a navigation link that takes the user to a separate screen
  • In isolation for a value that needs a chart, table, or full breakdown to be meaningful
  • For binary states — use a badge or status indicator on its own instead
RSVPs1,240
+12 this week
DoTitle first, then value. Use a badge to show meaningful change alongside the number.
1,240RSVPs
Don’tNever place the value before the title — this reversal breaks the established reading order.

content

The title should always be a single word. It acts as a label for the value — keep it short and direct so the value stays the focal point. When you need more precision, put that detail in the value itself or in the visual indicator rather than stretching the title into a phrase.

RSVPs1,240
+12 this week
Do“RSVPs” is a single word. The value and badge carry all the detail the user needs.
Total RSVPs1,240
+12 this week
Don’t“Total” is redundant — the value already communicates the total. Keep the title to one word.

visual indicators

An optional visual indicator sits below the value and adds context about trend or progress. Use a badge when the value has a directional change; use a progress bar when the value represents a portion of a whole.

RSVPs1,240
+12 this week
BadgeUse alongside data that updates. An up or down arrow communicates direction; a plus icon signals a new addition. Use sparingly — only when the change is meaningful to the user.
Sponsorship£24,500
£24,500 of £31,500
Progress BarUse when the value represents progress toward a target. Choose the intent that reflects the actual state of the data — not just whether the number is high or low.
Events7
No indicatorWhen the value alone is enough to understand the data, omit the visual indicator entirely. Don’t add one just to fill space.
Capacity94 / 100
Nearly full
Intent matches meaningMatch the badge intent to what the number means for the user — here, high capacity is a warning, so a negative intent is correct even though the number is “high”.

placement

Data points can be arranged in their own individual cards or grouped inside a single card and separated by vertical dividers. Placement is flexible — match the layout to the density and hierarchy of the surrounding screen.

RSVPs1,240
+12
Revenue£8,400
+5%
Rating4.8
Horizontal with dividersGroup related data points in a single card, separated by vertical dividers. Works well for event overview panels.
RSVPs1,240
+12
Sponsorship£24,500
-8%
Individual cardsEach data point in its own card. Use when data points represent independent topics or need more visual breathing room.
Events12
RSVPs4,820
+108
Average402
Sponsorship£86K
-12%
Summer Open1,240£24,500
Charity Cup890£18,200
Members Classic560£12,000
Summary above a tableUse data points as aggregate totals above a table to give users a quick headline before they scan the rows. The data points summarise what the table contains.