# Usage meter · MIAN

Plan usage against limits, seats, storage, API calls, with warning and over-limit states.

- Id: `usage-meter` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/usage-meter
- Use for: plan usage, quota, storage used, seats used, billing limits.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-meters`: A stack of meters.
- `mn-meter`: One meter: mn-meter-head (label and numbers), a progress bar, mn-meter-note.
- `mn-progress mn-warning · mn-danger`: Colour the bar when near or over the limit; the note follows.

## Accessibility

- Give the bar role="meter" with aria-valuenow, aria-valuemin, aria-valuemax and aria-label.
- State the numbers in text (“8.4 GB of 10 GB”): the bar alone is not enough.

## Examples

### Plan usage

```html
<div class="mn-card" style="max-width:26rem"><div class="mn-card-header"><h3 class="mn-card-title">Team plan</h3><p class="mn-card-description">Resets on 1 October</p></div>
<div class="mn-card-body mn-meters">
  <div class="mn-meter"><p class="mn-meter-head"><span>Seats</span><span>7 of 10</span></p><div class="mn-progress" role="meter" aria-label="Seats" aria-valuemin="0" aria-valuemax="10" aria-valuenow="7" style="--_v:70%"></div></div>
  <div class="mn-meter"><p class="mn-meter-head"><span>Storage</span><span>8.4 of 10 GB</span></p><div class="mn-progress mn-warning" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8.4" style="--_v:84%"></div><p class="mn-meter-note">84% used, consider archiving old files.</p></div>
  <div class="mn-meter"><p class="mn-meter-head"><span>API calls</span><span>104,210 of 100,000</span></p><div class="mn-progress mn-danger" role="meter" aria-label="API calls" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="104210" style="--_v:100%"></div><p class="mn-meter-note">Over the limit since 22 September. Extra calls are billed at €0.40 per 1,000.</p></div>
</div></div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/usage-meter/source