RateLimited
Says a limit was reached and holds the button until the wait is over.
SourcePackage @weft-js/warp
Preview
tsx
import { RateLimited } from '@weft-js/warp'export function Export() { return ( <RateLimited retryAfter={12} title="Export limit reached." description="You can run 5 exports a minute." trigger={EXPORT_BUTTON} /> )}const EXPORT_BUTTON = { children: 'Export CSV', emphasis: 'outline', tone: 'neutral' } as constInstallation
npm install @weft-js/warpUsage
tsx
import { RateLimited } from '@weft-js/warp'<RateLimited retryAfter={12} title="Export limit reached." description="You can run 5 exports a minute." trigger={EXPORT_BUTTON} />Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
retryAfter | number | — | Seconds, from the typed RATE_LIMITED.retryAfter: never a guess. |
title | unknown | 'Limit reached.' | The heading. |
description | unknown | — | "You can run 5 exports a minute." |
trigger | ButtonProps | — | The action that hit the limit: disabled, labelled "Try again in 20s", and back by itself. |
| Event | Type | Default | Description |
|---|---|---|---|
onDone | (() => void) | — | Called when the wait is over and the action is back. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="msg"]
msgrailrail-fill
RelatedConn bannerAudit log