Data Display

QuotaMeter

Meter composition for quota usage with reset and unlimited states.

import { QuotaMeter } from '@lostgradient/cinder';
quota-meter
01

Overview

Reference usage

QuotaMeter presents quota usage, limits, reset dates, and unlimited states through Meter.

Usage

svelte
<script lang="ts">
  import { QuotaMeter } from '@lostgradient/cinder';
</script>

<QuotaMeter used={72} />
Live preview

QuotaMeter

02

When to use

Use when
  • Showing usage against a plan or account limit.
Avoid when
  • Showing task completion.
03

Examples

QuotaMeter

Show finite quota consumption with an accessible value summary.

04

Props

Props for quota-meter
Name
Type
Default
Description
used number 0
limit number 100
resetsAt text
locale text BCP-47 locale used for the reset date. Defaults to LocaleProvider, then the runtime locale.
timeZone text 'UTC' IANA time zone used for the reset date.
unlimited boolean false
label text 'Quota'
children snippet