A succinct message that is displayed temporarily. Perfect for notifications and feedback messages.
Preview
Installation
Setup
Add the Toaster component to your root layout:
Usage
Examples
Simple
tsx
With Title
tsx
Destructive
tsx
Success
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
title | ReactNode | undefined | The title of the toast |
description | ReactNode | undefined | The description/message of the toast |
variant | "default" | "destructive" | "success" | "default" | The visual style of the toast |
action | ToastActionElement | undefined | An action button for the toast |
Accessibility
ARIA Roles
Uses role="status" to announce non-critical messages to screen readers.
Keyboard Navigation
Close button is keyboard accessible and can be activated with Enter or Space.
Focus Management
Toasts don't steal focus from the current element.
RTL Considerations
The Toast component is fully RTL-compatible. Toasts appear from the correct corner and content flows naturally.
Key RTL Features:
- Toast appears from the correct corner (bottom-start)
- Close button positions on the correct side (end)
- Swipe gestures work in the natural direction
- Content flows naturally in both directions
Use Cases
Success/error feedback after actions
Background process completion notices
Non-blocking system notifications
Undo action confirmations
Best Practices
Do
- ✓ Auto-dismiss after a reasonable time (5-8 seconds)
- ✓ Include an undo action for destructive operations
- ✓ Use appropriate variants (success, error, warning)
Don't
- ✗ Don't use for critical errors requiring action — use Dialog
- ✗ Don't show too many toasts simultaneously
- ✗ Don't put essential information only in toasts