Skip to content
hightouchUI

Design system

v42.1.0

Stats

Display compact stats describing the state of some resource.

Guidelines

When to use

  • When summarizing the state of a resource with a few compact title-value metrics.

When not to use

  • If displaying a single category, status, or count chip near a resource, use a badge instead.
  • If conveying live operational state, use a status indicator instead.

Content

  • Use sentence case everywhere.
  • Keep title to one or two words max.
  • Don't add a dot at the end of title or value.

Props

Stats

Inherits margin props.

NameDefaultDescription
children

ReactNodeStats items.

StatsItem

NameDefaultDescription
children

ReactNodeStats item.

StatsItemTitle

NameDefaultDescription
children

ReactNodeStats item title.

StatsItemValue

NameDefaultDescription
children

ReactNodeStats item value.