Toast
Notification toast system with stacking, auto-dismiss, pause on hover, and variant-based roles.
Example
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-right' | No | Container position (on ToastProvider) |
maxToasts | number | 5 | No | Maximum visible toasts (on ToastProvider) |
message | string | — | Required | Toast message (in toast() options) |
description | string | — | No | Secondary text (in toast() options) |
variant | 'info' | 'success' | 'warning' | 'danger' | 'info' | No | Toast color variant (in toast() options) |
duration | number | 5000 | No | Auto-dismiss delay in ms. 0 = persistent (in toast() options) |
Accessibility
- Container: role="region" with aria-label="Notifications" and aria-live="polite"
- Info/success toasts: role="status"
- Warning/danger toasts: role="alert"
- Dismiss button: aria-label="Dismiss notification"
- Timers pause on hover for reading time
Related Tokens
--toast-z-index--toast-radius--toast-shadow--toast-info--toast-success--toast-warning--toast-danger