A metric displays an important number value prominently. You can add indicators or labels to help provide context to the presented value.

Two example metrics displaying positive and negative indicators.

Use the pattern to give more prominence to key measurements. Metrics often serve as building blocks in dashboards. They effectively direct users to key information that they may otherwise overlook, particularly when multiple numerical values are visible.

You can add multiple metrics to your UI if needed. Visual differences, like size and positioning, can help users understand which metrics are most important.

Best practices
  • Place metrics higher in your layout when you want to emphasize their importance.
  • Never leave the user guessing how to interpret your metric. Make sure you provide enough context, and use subtitles and indicators to minimize ambiguity.
  • Keep titles and values as short and concise as possible. Round or truncate values to significant figures, and use common abbreviations instead of spelling out words.
  • Avoid displaying more than five metrics in a single dashboard view. This can clutter the user's screen and overwhelm them with too much information.

A single metric typically comprises:

  1. Metric value: can either be numeric or a string.
  2. Subtitles and subvalues: displays supporting information to improve the user’s understanding of a metric. Subtitles can link to related pages.
  3. Visual indicators: communicates contextual information.
Anatomy of metric
  • Use Text to create the metric.
  • Use Stack Layout to orient a metric in either a vertical or horizontal format.
  • Icon to display visual indicators.
  • Link as an action to navigate to additional information or pages from a metric.
Metric vertical layout

Metric is available in three sizes—small, medium and large. Change the size of the metric by changing the value text style between display 1, display 2 or display 3. Metric is available in both horizontal and vertical layouts.

See the vertical and horizontal examples below for individual spacing values.

Best practices

Use the same orientation when displaying multiple metrics within a single view for greater visual consistency. Do not mix vertical and horizontal metrics.

By default, metrics are arranged vertically with the value positioned beneath the title.

Example showing large metric with vertical layout.
Example showing medium metric with vertical layout.
Example showing small metric with vertical layout.

You can display the metric component in a horizontal orientation if that's more suitable for your layout. Ensure the margin height is adjusted in line with the size of the metric.

Example showing large metric with horizontal layout.
Example showing medium metric with horizontal layout.
Example showing small metric with horizontal layout.

In addition to the title, you can display a supporting subtitle and/or subvalue within a metric. You can use this to provide more context and improve users' comprehension of a metric's value and its impact.

Place subtitles directly beneath the title, and subvalues beneath the key value.

Example showing a metric with a subtitle and subvalue.
Best practices

To give more context about a metric value, such as whether it is positive or negative, use the subvalue to provide past data, average, threshold or target values, or comparable high or low values.

Display a link in the metric's subtitle text, enabling users to navigate to another page with related information.

Enable users to navigate to another page by linking from the subtitle.

Example showing a metric with a link.

Use indicators to provide further contextual information. For example, if the metric value represents a change from a previous value, i.e. from positive to negative, you can display an arrow icon as a strong visual indicator of the direction in change.

Example showing two metrics with positive and negative indicators.

If you need to expand the pattern or share feedback with us, please contact the team.