Search…
Search…
Toast
Live in Codebase
Toast components deliver brief, non-intrusive notifications, providing quick updates and enhancing the user experience with smooth, unobtrusive interactions.
AA
WCAG 2.1 accessibility compliant
Toast
Live in Codebase
Toast components deliver brief, non-intrusive notifications, providing quick updates and enhancing the user experience with smooth, unobtrusive interactions.
AA
WCAG 2.1 accessibility compliant
Toast
Toast components deliver brief, non-intrusive notifications, providing quick updates and enhancing the user experience with smooth, unobtrusive interactions.
View Figma Designs
View Figma Designs
View Figma Designs
Temporary notification messages with semantic variants that appear overlay-style to provide user feedback without blocking interface interaction.
When to use | When not to use |
|---|---|
✅ Use for concise messages that clearly state the notification’s purpose. | ⛔️ Avoid using for minor or temporary messages, use a Toast instead. |
✅ Apply for critical updates that need user attention or action. | ⛔️ Don’t auto-dismiss a notification; let the user dismiss or act on it. |
✅ Include only one clear call to action per notification. | ⛔️ Don’t use for error messages unless absolutely required prefer a Banner for error states. |
Anatomy
Element | Description |
|---|---|
| Lucide Icon globe |
| Title text of the toast component |
| Label of the toast component |
| Text |
Variants
The Toast component provides a comprehensive notification system with multiple semantic variants
Default | General notifications, system messages |
Info | Information, tips, feature announcements |
Success | Confirmations, completed actions, positive feedback |
Warning | Cautions, potential issues, important notices |
Error | Errors, failures, critical issues |
Spacing
Positioning & Behavior
Criteria | Description |
|---|---|
Position | Bottom of screen with safe area insets |
Duration | 4000ms default (customizable) |
Interaction | Pressable for custom actions |
Stacking | Automatic queue management for multiple toasts |
Dismissal | Auto-dismiss after duration or swipe gesture |
Temporary notification messages with semantic variants that appear overlay-style to provide user feedback without blocking interface interaction.
When to use | When not to use |
|---|---|
✅ Use for concise messages that clearly state the notification’s purpose. | ⛔️ Avoid using for minor or temporary messages, use a Toast instead. |
✅ Apply for critical updates that need user attention or action. | ⛔️ Don’t auto-dismiss a notification; let the user dismiss or act on it. |
✅ Include only one clear call to action per notification. | ⛔️ Don’t use for error messages unless absolutely required prefer a Banner for error states. |
Anatomy
Element | Description |
|---|---|
| Lucide Icon globe |
| Title text of the toast component |
| Label of the toast component |
| Text |
Variants
The Toast component provides a comprehensive notification system with multiple semantic variants
Default | General notifications, system messages |
Info | Information, tips, feature announcements |
Success | Confirmations, completed actions, positive feedback |
Warning | Cautions, potential issues, important notices |
Error | Errors, failures, critical issues |
Spacing
Positioning & Behavior
Criteria | Description |
|---|---|
Position | Bottom of screen with safe area insets |
Duration | 4000ms default (customizable) |
Interaction | Pressable for custom actions |
Stacking | Automatic queue management for multiple toasts |
Dismissal | Auto-dismiss after duration or swipe gesture |
Temporary notification messages with semantic variants that appear overlay-style to provide user feedback without blocking interface interaction.
When to use | When not to use |
|---|---|
✅ Use for concise messages that clearly state the notification’s purpose. | ⛔️ Avoid using for minor or temporary messages, use a Toast instead. |
✅ Apply for critical updates that need user attention or action. | ⛔️ Don’t auto-dismiss a notification; let the user dismiss or act on it. |
✅ Include only one clear call to action per notification. | ⛔️ Don’t use for error messages unless absolutely required prefer a Banner for error states. |
Anatomy
Element | Description |
|---|---|
| Lucide Icon globe |
| Title text of the toast component |
| Label of the toast component |
| Text |
Variants
The Toast component provides a comprehensive notification system with multiple semantic variants
Default | General notifications, system messages |
Info | Information, tips, feature announcements |
Success | Confirmations, completed actions, positive feedback |
Warning | Cautions, potential issues, important notices |
Error | Errors, failures, critical issues |
Spacing
Positioning & Behavior
Criteria | Description |
|---|---|
Position | Bottom of screen with safe area insets |
Duration | 4000ms default (customizable) |
Interaction | Pressable for custom actions |
Stacking | Automatic queue management for multiple toasts |
Dismissal | Auto-dismiss after duration or swipe gesture |
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.