Alert Styles
Notification banners and alert messages
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.
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.
Outline 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 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.
Dismissible
Dismissible Alert
Click the X button to dismiss this alert.
Another Dismissible
This solid alert can also be dismissed.
Warning Alert
Even minimal alerts can be dismissible.
Custom Icons
New Feature!
Check out our latest updates and improvements.
Secure Connection
Your connection is encrypted and secure.
Performance Tip
Enable caching to improve load times.
Title Only
Changes saved successfully!
Failed to save changes
3 new notifications
Usage
import { Alert } from '@/components/Alert';
// Basic
<Alert type="success" title="Success!">
Your changes have been saved.
</Alert>
// Variants: 'light' | 'solid' | 'outline' | 'minimal'
<Alert type="error" title="Error" variant="solid">
Something went wrong.
</Alert>
// Dismissible
<Alert
type="info"
title="Info"
dismissible
onDismiss={() => console.log('dismissed')}
>
Click X to dismiss.
</Alert>
// Custom Icon
<Alert type="info" title="Custom" icon={<Rocket size={20} />}>
With custom icon.
</Alert>