Toast
Enhanced toast notification component with smooth animations, customizable positioning, auto-dismiss functionality, and advanced toast queue management. Perfect for modern user feedback and notification systems.
Pro features
What the Pro version adds to this component.
Styled MoonUIToastPro
Drop-in Pro toast Root with polished styling, fully composable with the toast primitives
Five Semantic Variants
default, destructive, success, warning, and info styles for clear, contextual feedback
Swipe & Controlled State
Swipe-to-dismiss gestures with fully controlled open / onOpenChange state
Action Buttons
Attach an interactive ToastAction with accessible alt text to any toast
Queue Management
Automatic queue with a configurable concurrent-toast limit
Auto-Dismiss Duration
Per-toast duration control, from a quick flash to a persistent notice
Installation
Install via CLI
npx @moontra/moonui-cli add toastUsage
Basic Usage
Pro Usage
Examples
Basic Usage
Simple toast notification
Variants
Different toast variants for different purposes
With Action
Toast with action button
Duration Control
Control how long toasts are displayed
Programmatic Control
Control toasts programmatically
Toast Stack
Multiple toasts with queue management
Form Validation
Using toasts for form feedback
Notification Center
Toast-based notification system
Pro Toast Component
Compose MoonUIToastPro with the toast primitives for a fully controlled, styled notification with an action button.