component
Quota meter
Usage against a limit, amber from the warning mark, red and hatched over the limit.
A meter for usage against a quota. It turns amber at warn-at (80% by default) and red, with Zoo UI's hatch, over the limit, so "over" never relies on color alone.
3.2 / 10 GB8.6 / 10 GB10 / 10 GB
<template>
<div class="flex flex-col gap-3 w-full max-w-sm">
<ZQuotaMeter :used="3.2" :quota="10" />
<ZQuotaMeter :used="8.6" :quota="10" />
<ZQuotaMeter :used="10.4" :quota="10" size="lg" />
</div>
</template>Custom units and labels
unit names what is counted, and format replaces the label entirely.
9 of 12 seats
<script setup lang="ts">
const seats = (used: number, quota: number) => `${used} of ${quota} seats`
</script>
<template>
<div class="w-full max-w-sm">
<ZQuotaMeter :used="9" :quota="12" unit="seats" :warn-at="0.7" :format="seats" />
</div>
</template>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quotarequired | number | — | — |
| usedrequired | number | — | — |
| format | (used: number, quota: number) => string | — | — |
| showValue | boolean | true | — |
| size | "md" | "lg" | "md" | — |
| unit | string | "GB" | — |
| warnAt | number | 0.8 | 0–1; amber from here, red + hatched at 100% |