Toast
A component that displays brief, non-disruptive messages to users. Provides a system for showing temporary notifications that automatically dismiss after a set duration. Implements proper focus management and gesture support for optimal user experience. Messages can be triggered from anywhere in the application through a provider component.
Automatically closes after configurable duration
Supports keyboard navigation and focus management
Supports closing via swipe gesture
Can be triggered from anywhere in the application
Architecture
Reference
Provider
The root container that manages the state and behavior of the toast system. Coordinates the creation, display and dismissal of toast messages throughout the application.
Toast
The container component that displays an individual toast message. Manages its own visibility state, animation and interaction handling.
Keyboard
- F8
When pressed, moves focus to the first available toast message in the region.
- Tab
Moves focus to the next focusable element within the toast message.
- Shift+Tab
Moves focus to the previous focusable element within the toast message.
- Space
When focus is on a toast close button, dismisses the toast message.
- Enter
When focus is on a toast close button, dismisses the toast message.
- Escape
When focus is on any element within a toast message, dismisses that toast.