Components

Meter

Shows a measurement inside a known range.

Usage

Basic

HTML

<bs:bsui-meter value="72" min="0" max="100" label="Storage used" />

Custom range

The range is whatever the measurement uses, not always a percentage.

HTML

<bs:bsui-meter value="320" min="0" max="500" label="Requests per minute" />

Usage list

A label and a readout above each meter make a quota panel.

Storage 18 of 25 GB

Bandwidth 240 of 1000 GB

HTML

<bs:bsui-stack direction="column" gap="4">
  <bs:bsui-stack direction="column" gap="2">
    <bs:bsui-stack direction="row" gap="3" justify="space-between">
      <bs:bsui-text content="Storage" variant="label" tag="span" />
      <bs:bsui-text content="18 of 25 GB" variant="muted" tag="span" />
    </bs:bsui-stack>
    <bs:bsui-meter value="18" min="0" max="25" label="Storage" />
  </bs:bsui-stack>
  <bs:bsui-stack direction="column" gap="2">
    <bs:bsui-stack direction="row" gap="3" justify="space-between">
      <bs:bsui-text content="Bandwidth" variant="label" tag="span" />
      <bs:bsui-text content="240 of 1000 GB" variant="muted" tag="span" />
    </bs:bsui-stack>
    <bs:bsui-meter value="240" min="0" max="1000" label="Bandwidth" />
  </bs:bsui-stack>
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`value`	`number`	`0`
`min`	`number`	`0`
`max`	`number`	`100`
`low`	`number`	—
`high`	`number`	—
`optimum`	`number`	—
`label`	`text`	—