Toast
The Toast component displays temporary notifications with various types, positions, and persistence options.
Basic usage
The Toast provides feedback through temporary messages that appear and automatically dismiss.
Component anatomy
Type
Configure message appearance using the type Input:
- Neutral: Informational messages (default)
- Success: Positive confirmations
- Danger: Error notifications
Each type includes matching icons and colors.
Position
Control toast placement using the position Input:
- Top: Start/Center/End
- Bottom: Start/Center/End (default: Bottom Center)
Multiple toasts stack automatically with consistent spacing.
Persistence
Manage display duration through the persistency Input:
- Timed: Auto-dismissal after timeout (default: 5s)
- Persistent: Remains until manually closed
- Timer bar indicates remaining time
- Pause on hover/focus
Content
Support for multiple content types:
- String content
- Template content
- HTML content
- Rich text formatting
- Links within content
Animation
Smooth transitions for:
- Entry/exit animations
- Position changes
- Stacking behavior
- RTL support
Negative Theme
Enable dark theme using the negative Input, affecting:
- Background color
- Text color
- Icon colors
- Border colors
- Timer bar colors
Accessibility
ARIA Implementation
Complete ARIA integration:
- Alert role for danger type
- Status role for other types
- Auto-focus on close button
- Proper labelling
- Description relationships
Screen Reader Support
Enhanced announcements for:
- Toast appearance
- Content changes
- Type indication
- Timer status
- Close actions
Focus Management
Careful focus handling:
- Auto-focus on close button
- Keyboard navigation
- Focus trap prevention
- Escape key support
- Focus restoration
Best Practices for Developers
Type Selection DEMO HERE
Content Guidelines DEMO HERE
Position Usage DEMO HERE