Meter examples

This page shows how to use the Meter component.

In FunctionCard

A Meter can be used to display the progress of a savings goal.

In OverviewCard

A Meter can be found in an OverviewCard that has no horizontal prop set, it is typically used to display credit card information.

With Legend

When a Legend is placed after a Meter, its indicator colours will match the Meter bars.

The previous example shows a compact Legend with variant={Legend.VARIANT.HORIZONTAL}. When a regular Legend is used below a Meter, there is usually a fake header preceeding it – this ain’t a Legend, but merely text inside a Flex component.

In TransactionDetail

If you look closely, the TransactionDetail example in Storybook contains a Meter too.