Meter

Visual indicators showing numeric values in a range.

Guidelines

We have both Meter and Progress components. Here are the guidelines for using them:

• Use Meter when you want to show static numeric values in a range.
• Use Progress when you want to show a progress of a task in a horizontal bar.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Meter,
  MeterLabel,
  MeterValue
} from "components/selia/meter";

Structure

The expected structure and composition of the component.

<Meter value={50}>
  <MeterLabel>Storage</MeterLabel>
  <MeterValue />
</Meter>