RateLimitNotice
StableAn amber message that says when a usage limit resets, with an optional Upgrade button.
Also known as quota exceeded, usage limit, too many requests, throttling message
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
With upgrade
You've reached the usage limit
<RateLimitNotice resetsIn="2 hours" onUpgrade={() => {}} />The Upgrade button is a small primary button.
When to use it
Tells people they reached a usage limit and when it resets. Amber marks that they must wait or act before going on.
Made of: Alert icon · Title · Reset time · Upgrade button
Use it for
- A person has used up their messages or credits for now.
- Offering a way to upgrade: pass onUpgrade.
Not for
- How much has been used before the limit is reached: use UsageMeter.
- A failure that can be tried again right away: use ErrorState.
Do and avoid
You've reached the usage limit
You've reached the usage limit
Do
- Give the real time until the limit resets.
- Offer Upgrade only if it applies to the person's plan.
- Place it where the blocked action would have been.
- Disable the blocked action, or explain it next to the action, so people do not run into the limit again.
Avoid
- Do not show it before the limit is reached. Use a quieter hint.
- Do not use a full date. Give a short time.
- Do not use it when the service is down. Use ErrorState.
On a phone
- The message wraps, and on a phone the Upgrade button drops under it so the text keeps its full width.
- Upgrade keeps its size and has a 44px tap area on touch screens.
- It fills the width of its container.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| resetsInrequired | string | none | Human duration inserted into the sentence Limits reset in {resetsIn}. |
| onUpgrade | () => void | none | Adds an Upgrade button when provided. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- upgrade
- Pass onUpgrade to show an Upgrade button next to the message.
Tokens
Change one of these and every part that uses it follows.
--warning-soft--warning-fg
Built in
- Screen readers announce it politely when it appears.
- Upgrade is a real button with visible words.
- The icon is hidden from screen readers. The title and the reset time carry the meaning.
What you need to do
- Pass a short time, such as "2 hours", because it is read inside "Limits reset in …".
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide