Storage Usage
A quota and what is filling it. The bar is scaled to the quota, not to what is used, so free space reads as free space — a bar normalised to the total consumed is always full, which is backwards for a component answering “how much room is left”.
src/components/ui/storage-usage.tsxAbout
From the component's own source, where it was written.
A quota and what is filling it.
The bar is scaled to the **quota**, not to what is used, so free space reads as free space. A bar normalised to the total consumed is always full, which is exactly backwards for a component whose job is "how much room is left".
Segments below a pixel still get a sliver, for the reason every stacked bar in this kit does: "logs are tiny" and "there are no logs" must not render identically.
Over quota is a real state, not a clamped bar. Object stores keep accepting writes and bill for them, so a component that silently pins at 100% hides the one number someone is about to be charged for.
Install
npx astralyx-ui add storage-usage
Usage
import { StorageUsage } from '@/components/ui/storage-usage'
<StorageUsage segments={segments} quota={200 * 1024 ** 3} />Composer
Change the props and the source below follows.
Storage
172 GB / 200 GB
- Images39.1 GB
- Video110 GB
- Database backups22.4 GB
- Logs858 MB
- Free27.8 GB
<StorageUsage segments={segments} quota={200 * 1024 ** 3} />Examples
Comfortable, and over quota
<StorageUsage segments={segments} quota={quota} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
StorageUsage
A quota and what is filling it.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | StorageSegment[] | required | { id, label, bytes, color? }. Omit the quota for an unmetered store and the bar scales to the total instead. |
| quota | number | — | An object store keeps accepting writes and billing for them; pinning the bar at 100% hides the one number someone is about to be charged for. |
| warnAt | number | 0.85 | Warn past this fraction of the quota. |
| label | ReactNode | 'Storage' | — |
| freeLabel | string | 'Free' | — |
| overLabel | (over: string) => ReactNode | (over) => `${over} over quota` | — |
| format | (bytes: number) => string | formatBytes | — |
Functions
| Function | Signature | Description |
|---|---|---|
| formatBytes | (bytes: number) => string | — |
Types
StorageSegment
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| bytes | number | — |
| color? | string | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| minimum segment | 2px | “Logs are tiny” and “there are no logs” must not render identically. |