Toast
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
RTL Support Example
The Toast component automatically adapts to RTL layouts. Toasts appear from the correct corner and content flows naturally.
LTR (English)
RTL (العربية)
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