Toast
A temporary notification component powered by Alpine.js with auto-dismiss functionality. Displays brief messages with semantic variants and smooth animations.
Interactive Demo
Variants (Static Display)
Information: Your profile has been updated
Success: Changes saved successfully
Warning: Session will expire soon
Error: Unable to complete request
Usage Example
Action completed!
Info message
Success message
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | required | Toast message text |
| variant | string | 'info' | Toast variant: info, success, warning, error |
| icon | string|null | null | Custom icon (defaults to variant icon) |
| dismissable | boolean | true | Show close button |
| class | string | '' | Additional CSS classes |
Key Features
Auto-Dismiss
Automatically disappears after 5 seconds
Smooth Animations
Slide-in and fade-out transitions
Semantic Variants
Color-coded for different message types
ARIA Compliant
Proper role and aria-live attributes