Toast
Transient status notifications with semantic variants, actions, queueing, anchored placement, and accessible lifecycle behavior.
Contract
| Axis | Values | Default |
|---|---|---|
variant | neutral, info, success, warning, danger | semantic toast type, otherwise neutral |
position | block start/end × inline start/center/end | block-end-inline-end |
| lifecycle | add, update/upsert, promise, timeout, dismiss one/all, queue limit | provider-managed |
| accessibility | polite live region, high-priority alert, F6 navigation, Escape dismissal, focus restoration | Base UI-managed |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/toast.css';Scroll inside the code area to read long lines.
Imports
import { TRToast, useToastManager } from '@tinyrack/ui/components/toast';Scroll inside the code area to read long lines.
Playground
The preview owns its toast manager lifecycle. Reset remounts the provider and clears preview notifications; content, position, and semantic variant remain visible controls.
Usage
Examples
Status variants permalink
Publish semantic status colors through the real manager.
Logical viewport positions permalink
The six logical positions adapt to left-to-right and right-to-left layouts.
Action, update, promise, queue, and timeout permalink
Update in place, map promise states, dismiss notifications, and observe a provider limit of two.
Anchor, positioner, and arrow permalink
Anchored notifications remain inside a labeled Viewport so live-region and focus behavior are preserved.
API
TRToast contains Provider, Portal, Viewport, Root, Content, Title, Description, Action, Close, Positioner, and Arrow. It also exposes createToastManager and useToastManager; named helper exports are available too.
Provider accepts timeout, limit, and a global toastManager. useToastManager returns reactive toasts plus add, update, close, and promise. add accepts title, description, semantic type, timeout, priority, callbacks, actionProps, custom data, and anchor positionerProps. Reusing an id updates a toast in place. close(id) dismisses one toast and close() dismisses all.
Render stacked and anchored notifications in separate providers when both patterns coexist. Give every simultaneous Viewport a distinct aria-label. Base UI owns timers, queue state, swipe dismissal, F6 focus entry/restoration, Escape dismissal, portals, and polite/high-priority live announcements; Tinyrack owns variants, tokens, layout, and motion.