Components
Quota meter
Space or time used against a plan: the figure in words, a meter that turns amber at 80 % and red at 95 %, the sentence that says what to do, the small figures and the way out.
import { QuotaMeter } from "@krizaka/ui/quota-meter";Web only — React, from @krizaka/ui/quota-meter. Beta: its API may still change in a minor version.
- Mobile · ✗ to build. The native twin is a
Cardwith aMeter; it follows when a mobile screen shows a quota (Yomizaka's library). issue #275
Why it is here. Yomizaka's library quota and Akinaza's plan (krizaka-ui#515).
When to use
- A creator's or an owner's storage, minutes or credits against their plan.
- Any limit the person can run into and should hear about before.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { QuotaMeter } from "@krizaka/ui/quota-meter";Examples
Storage at 86 %
Used in words, an amber meter, the sentence, minutes and today's uploads, the way to manage.
Full and paused
A red meter, the sentence, uploads on hold and the platform paused.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxrequired | number | null | — | The limit; null for no limit (no meter is drawn). |
meterLabelrequired | string | — | The meter's accessible name. |
titlerequired | ReactNode | — | What is measured (Storage), with an optional icon before it. |
usedTextrequired | string | — | « 3.2 GB of 10 GB », said once for the eye and once for the meter's value. |
valuerequired | number | — | Used so far, in the unit of max. |
action | ReactNode | — | The way out, shown under the figures (a link to manage). |
compact | boolean | false | Leaves out the footer (the small figures and the action): the title, the used line, the meter, the sentence and the notices stay. |
details | readonly ReactNode[] | [] | Small figures under the meter (minutes, today's uploads). Left out when the card is compact. |
icon | ReactNode | — | A glyph before the title (decorative). |
level | QuotaLevel | ok | Where the level stands: tones the sentence and gives an alarming one a status role. |
notices | readonly ReactNode[] | [] | More sentences that matter (« 2 uploads on hold », « uploads are paused »), each a status. |
plan | ReactNode | — | The plan's name, on the right of the title. |
statusText | ReactNode | — | The sentence for that level (« You are close to your limit »). |
Accessibility
- The card is a region named by its title.
- The meter has its own accessible name and value text; an alarming sentence is
role=status.
Best practices
- Say the figure in words (
3.2 GB of 10 GB): the colour is never the only signal. - Give the sentence for each level (
warning,critical,full): the alarming ones are read as a status. - Put the way out (
action) in the card, not in a banner elsewhere. max={null}for an unlimited plan: the figure stays, the meter goes.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub