Alert

The Alert component is used to convey important information to users. It provides modern glass effects and smooth animations.

Basic Usage

Information

This is an information alert. Use it to convey important information.

Success

The operation completed successfully!

Warning

This action cannot be undone. Please proceed with caution.

Error

An error occurred. Please try again.

Props

Prop	Type	Default	Description
type	'info' | 'success' | 'warning' | 'error'	'info'	Type of alert
title	string	-	Alert title (optional)
icon	string	-	Custom icon (optional)

Usage Examples

Basic Alert

<Alert type="info">This is a basic information alert.</Alert>

Alert with Title

<Alert type="success" title="Installation Complete">
  The package has been successfully installed.
</Alert>

Custom Icon

<Alert type="warning" title="Warning" icon="🚨">
  This action cannot be undone.
</Alert>

Error Message

<Alert type="error" title="Error Occurred" icon="💥">
  Network connection failed. Please check your internet connection.
</Alert>

Features

✨ Modern Design

• Glass Effect: Applied backdrop-filter: blur(20px)
• Gradient Background: Beautiful gradient effects for each type
• Soft Shadows: Multi-layered shadows for depth
• Hover Animation: translateY(-2px) transform and icon bounce effect

🎨 Type-specific Features

• Info: Blue gradient, for information delivery
• Success: Green gradient, for success messages
• Warning: Orange gradient, for warnings
• Error: Red gradient, for error messages

🌙 Dark Mode Support

• Automatic color adjustment
• Consistent user experience
• Perfect theme compatibility

📱 Responsive Design

• Optimized size on mobile
• Adaptive padding and font sizes
• Touch-friendly interface

💫 Animation Effects

• Alert Fade-in: Smooth appearance on page load
• Hover Effects: Natural transformation on mouse over
• Icon Bounce: Icon bounce animation on hover
• Smooth Transitions: Natural transitions for all state changes

🎯 Accessibility

• Clear color distinction
• Appropriate contrast ratios
• Screen reader compatibility
• Keyboard navigation support

Styling

The Alert component can be customized through CSS variables:

:root {
  --page-alert-border-radius: 16px;
  --page-alert-padding: 20px 24px;
  --page-alert-gap: 16px;
}

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Provides optimal performance on modern browsers.