Toast Styles
Notification and toast message designs
Live Demo - Click to show toast
Solid Variants
Success!
Your changes have been saved successfully.
Error!
Something went wrong. Please try again.
Warning!
Please review your input before proceeding.
Information
New features are now available for you.
Light Variants
Success!
Your changes have been saved successfully.
Error!
Something went wrong. Please try again.
Warning!
Please review your input before proceeding.
Information
New features are now available for you.
Minimal
Changes saved successfully
Failed to save changes
You have 3 new notifications
With Action
File deleted
project-v2.zip has been deleted
Update available
A new version is ready to install
Usage
import { Toast, ToastProvider, useToast } from '@/components/Toast';
// Wrap your app with ToastProvider
<ToastProvider>
<App />
</ToastProvider>
// Use the hook to show toasts
const { addToast } = useToast();
addToast({
type: 'success',
title: 'Saved!',
message: 'Your changes have been saved.',
variant: 'solid', // 'solid' | 'light' | 'minimal'
duration: 3000, // auto-dismiss in ms
});