COMPONENTS

Metric

Metric highlights information in the form of text value based on the data it represents.

Metric Intro
Metric Anatomy
  1. Metric Header
  2. Metric Content
  3. Metric Footer
  4. Primary Label
  5. Value
  6. Delta Direction
  7. Legend
  8. Delta Value
  9. Secondary Label

Metric can be displayed vertically or horizontally.

Metric Orientation

Metric supports showing a delta value in text. Delta text can be placed in the header, content or footer of the metric. The text can have a color assigned for positive and negative values. To improve accessibility, do not rely only on color to indicate positive or negative trends and instead add a plus or minus sign in front of the value.

Metric Delta Text

An arrow is used to indicate the direction in which the metric is trending. The directional arrow is always placed immediately after the numeric value in the content section. By default, the color is Gray 060. Color can be assigned to each direction, but is not predefined. This allows for the flexibility of showing a negative value in a color that has a typically positive association, like green.

Metric Direction

A metric badge can be used to simplify the display of a metric and combines value, direction and background color into one visual unit for a more compact display.

Metric Badge

Metric badges are Gray 060 by default, but can be set to use any of the the bold colors shown in the Badge component or to use custom colors from the color system. Badge color is set independently from the delta text. While both should have a similar color, this allows a darker value to be set for text when needed to optimize legibility.

Metric Badge Color

Labels can be placed within the header, content area or footer of Metric.

Metric Labels

If a Metric is set to be clickable, then four states are available — enabled, hover, focused, and active.

Metric States

Related metrics can be grouped together. Metric Groups are visually linked together with a thin grey line to the left of the values and have an optional group title.

Metric Grouping

Metric can be displayed in four sizes — large, medium, small and extra small.

Metric Sizes