Storage Quota Meter

ProNew

Shows how much of the storage plan is used, adds a file's size as a preview of the new total before accepting, refuses files that do not fit with the exact number, and offers an upgrade link at the limit. Use this when uploads count against a plan.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

used1

limit1

Guide and examples

When to use it

Storage or bandwidth is limited by plan and people should know before they hit the wall.

Do not use it when: For unlimited storage, skip the meter and keep per-file limits.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`used`	`number`	80 MB	Bytes already used.
`limit`	`number`	100 MB	Bytes the plan includes.
`onUpgrade`	`() => void`	-	Called by the upgrade button.
`onAccept`	`(files) => void`	-	Called with the files that fit.

Accessibility

The meter is a named progress bar and the numbers are text ("80 MB of 100 MB", "20 MB left"); the warning color is paired with the number, which is the information.
A refused file is named with its size and the exact space left, in the field's alert. The upgrade offer is a status line with a normal button.
The upload button is disabled until something fits.

Testing

The pattern ships with a Testing Library test (upload-quota-meter.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Storage or bandwidth is limited by plan and people should know before they hit the wall.

Do not use it when: For unlimited storage, skip the meter and keep per-file limits.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`used`	`number`	80 MB	Bytes already used.
`limit`	`number`	100 MB	Bytes the plan includes.
`onUpgrade`	`() => void`	-	Called by the upgrade button.
`onAccept`	`(files) => void`	-	Called with the files that fit.

Accessibility

The meter is a named progress bar and the numbers are text ("80 MB of 100 MB", "20 MB left"); the warning color is paired with the number, which is the information.
A refused file is named with its size and the exact space left, in the field's alert. The upgrade offer is a status line with a normal button.
The upload button is disabled until something fits.

Testing

The pattern ships with a Testing Library test (upload-quota-meter.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.