Storage used 65%

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="Storage used" value={65} />

Import

import { Meter } from "kumo-svelte/components/meter";

Usage

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="Storage used" value={65} />

Examples

Basic Meter

The default meter displays a label and percentage value.

Storage used 65%

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="Storage used" value={65} />

Custom Value Display

Use customValue to show a custom string instead of the percentage.

API requests 750 / 1,000

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="API requests" value={75} customValue="750 / 1,000" />

Hidden Value

Set showValue={false} to hide the value display.

Progress

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="Progress" value={40} showValue={false} />

Full Meter

A meter at 100% capacity.

Quota reached 100%

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="Quota reached" value={100} />

Low Value

A meter with a low value.

Memory usage 15%

<script lang="ts">
  import { Meter } from "kumo-svelte/components/meter";
</script>

<Meter label="Memory usage" value={15} />

API Reference

Meter

Prop	Type	Default
value	`number`	`0`
min	`number`	`0`
max	`number`	`100`
customValue	`string`	—
label*	`string`	—
showValue	`boolean`	`true`
class	`string`	—
trackClass	`string`	—
indicatorClass	`string`	—
id	`string`	—

Accessibility

Meter uses Bits UI’s Meter primitive and exposes the provided label alongside the visual track. Use Meter for scalar measurements within a known range; use a progress indicator for indeterminate loading.