Skip to content
hightouchUI

Design system

v40.8.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

ReactNode

Stats items.

StatsItem

NameDefaultDescription
children

ReactNode

Stats item.

StatsItemTitle

NameDefaultDescription
children

ReactNode

Stats item title.

StatsItemValue

NameDefaultDescription
children

ReactNode

Stats item value.