Skip to content
hightouchUI

Design system

97dff0e

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.