Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add usage-meter

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::usage-meter> shows how much of a limit has been consumed — storage, seats, API calls.

Basic Usage

Storage
API calls

approaching the limit

Seats

almost at the limit 

<div class="w-full max-w-sm space-y-5">
    <x-aura::usage-meter :used="18" :limit="100" label="Storage" unit="GB" />
    <x-aura::usage-meter :used="82" :limit="100" label="API calls" unit="k" />
    <x-aura::usage-meter :used="97" :limit="100" label="Seats" />
</div>

Props

Prop Type Default Description
used int|float 0 Amount consumed.
limit int|float 100 The quota.
label string|null null Defaults to the translated "Usage".
unit string|null null GB, k, seats…
warnAt int 75 Percentage at which the bar turns amber.
dangerAt int 90 Percentage at which it turns red.
showValues bool true The label and the figures above the bar.

Accessibility

  • The bar changes colour as it fills, and colour alone is not information. Past the thresholds the state is also written out — "approaching the limit", "almost at the limit" — both in the accessible name and as visible text.
  • role="progressbar" with the real values, and a name that reads "Storage: 18 GB of 100 GB used" rather than a bare percentage.
  • Going over the limit is clamped to 100% so the bar cannot escape its track, while the figures still show the true amount.