RateLimited
Says a limit was reached and holds the button until the wait is over.
SourcePackage @kerf-js/veneer
Preview
tsx
import { RateLimited } from '@kerf-js/veneer'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 @kerf-js/veneerUsage
tsx
import { RateLimited } from '@kerf-js/veneer'<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 veneer'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