22 KiB
22 KiB
Alert/Notification Component
Alert and notification messages for user feedback, system status, and important information display with various styles and interactive capabilities.
Success Alert
┌──────────────────────────────────────────────────┐
│ ✓ {{title}} │✕│
├──────────────────────────────────────────────────┤
│ │
│ {{message}} │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Undo │ │ View │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Warning Alert
┌──────────────────────────────────────────────────┐
│ ⚠ Warning: Check Your Input │✕│
├──────────────────────────────────────────────────┤
│ │
│ Some fields contain invalid data. Please │
│ review and correct before proceeding. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Review │ │ Continue │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Error Alert
┌──────────────────────────────────────────────────┐
│ ✗ Error: Failed to Save │✕│
├──────────────────────────────────────────────────┤
│ │
│ An error occurred while saving your changes. │
│ Please try again or contact support. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Try Again│ │ Support │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Info Alert
┌──────────────────────────────────────────────────┐
│ ℹ Information │✕│
├──────────────────────────────────────────────────┤
│ │
│ New features are available! Check out the │
│ latest updates in your dashboard. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Learn More│ │ Dismiss │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Compact Alert
┌─────────────────────────────────────────────┐
│ ✓ Saved successfully! │✕│
└─────────────────────────────────────────────┘
Alert without Actions
┌──────────────────────────────────────────────────┐
│ ✓ {{title}} │✕│
├──────────────────────────────────────────────────┤
│ │
│ {{message}} │
│ │
└──────────────────────────────────────────────────┘
Alert without Border
✓ {{title}} ✕
{{message}}
┌──────────┐ ┌──────────┐
│ Undo │ │ View │
└──────────┘ └──────────┘
Toast Notification Style
┌────────────────────────────────────────┐
│ ✓ Changes saved! │✕│
└────────────────────────────────────────┘
Progress Alert
┌──────────────────────────────────────────────────┐
│ ⏳ Uploading Files... │✕│
├──────────────────────────────────────────────────┤
│ │
│ Please wait while we upload your files. │
│ │
│ ████████████████░░░░ 75% │
│ │
│ ┌──────────┐ │
│ │ Cancel │ │
│ └──────────┘ │
└──────────────────────────────────────────────────┘
Persistent Alert (No Auto-dismiss)
┌──────────────────────────────────────────────────┐
│ ⚠ Action Required │✕│
├──────────────────────────────────────────────────┤
│ │
│ Your subscription expires in 3 days. │
│ Please update your payment method. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Update │ │ Remind Later│ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Alert Stack (Multiple Alerts)
┌──────────────────────────────────────────────────┐
│ ✓ File uploaded successfully! │✕│
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ ℹ New message received │✕│
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ ⚠ Storage almost full │✕│
└──────────────────────────────────────────────────┘
Loading Alert
┌──────────────────────────────────────────────────┐
│ ⟳ Processing Request... │░│
├──────────────────────────────────────────────────┤
│ │
│ Please wait while we process your request. │
│ This may take a few moments. │
│ │
└──────────────────────────────────────────────────┘
Alert with Rich Content
┌──────────────────────────────────────────────────┐
│ 🎉 Welcome to Premium! │✕│
├──────────────────────────────────────────────────┤
│ │
│ You've successfully upgraded to Premium plan. │
│ │
│ ✓ Unlimited storage │
│ ✓ Priority support │
│ ✓ Advanced features │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Get Started│ │ Learn More│ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Status Message Alert
┌──────────────────────────────────────────────────┐
│ 🔄 System Maintenance │░│
├──────────────────────────────────────────────────┤
│ │
│ We're performing scheduled maintenance. │
│ Expected completion: 2:00 AM EST │
│ │
│ ┌──────────┐ │
│ │ Status Page│ │
│ └──────────┘ │
└──────────────────────────────────────────────────┘
Inline Alert (Within Form)
┌─────────────────────────────────────────────────┐
│ Name: ┌─────────────────────────────────────┐ │
│ │ John Doe │ │
│ └─────────────────────────────────────┘ │
│ │
│ Email: ┌────────────────────────────────────┐ │
│ │ invalid-email │ │
│ └────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ ⚠ Please enter a valid email address │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
Dismissible with Timer
┌──────────────────────────────────────────────────┐
│ ✓ Message sent! │✕│
├──────────────────────────────────────────────────┤
│ │
│ Your message has been delivered successfully. │
│ │
│ ░░░░░░░░░░░░░░░████ Auto-dismiss in 3s │
└──────────────────────────────────────────────────┘
Dimensions
- Standard Width: 40-60 characters
- Compact Width: 30-45 characters
- Toast Width: 25-40 characters
- Height: 4-10 lines depending on content
- Action Button Height: 3 characters
Variables
title(string): Alert heading text (max 50 characters)message(string, required): Main alert content (max 200 characters)variant(string): Alert type ("success", "warning", "error", "info", "default")icon(string): Icon character for alert type (max 5 characters)dismissible(boolean): Show close button (default: true)persistent(boolean): Prevent auto-dismiss (default: false)actions(array): Action buttons with text and callbacks (max 3)compact(boolean): Use minimal spacing (default: false)bordered(boolean): Show container border (default: true)
Accessibility
- Role: alert (for important messages) or status (for less critical)
- Focusable: Yes, for dismissible alerts
- Keyboard Support:
- Escape: Dismiss alert (if dismissible)
- Tab: Navigate through action buttons
- Enter: Activate focused button
- ARIA:
aria-live: "assertive" for alerts, "polite" for statusaria-label: Descriptive label including alert typearia-describedby: Link to message content
Usage Examples
Form Validation
┌──────────────────────────────────────────────────┐
│ ✗ Validation Error │✕│
├──────────────────────────────────────────────────┤
│ │
│ Please correct the following errors: │
│ • Email address is required │
│ • Password must be at least 8 characters │
│ │
└──────────────────────────────────────────────────┘
Save Confirmation
┌──────────────────────────────────────────────────┐
│ ✓ Draft Saved │✕│
├──────────────────────────────────────────────────┤
│ │
│ Your draft has been automatically saved. │
│ │
│ ┌──────────┐ │
│ │ Continue │ │
│ └──────────┘ │
└──────────────────────────────────────────────────┘
System Status
┌──────────────────────────────────────────────────┐
│ 🔧 Maintenance Mode │░│
├──────────────────────────────────────────────────┤
│ │
│ The system is currently undergoing maintenance. │
│ Please try again in a few minutes. │
│ │
└──────────────────────────────────────────────────┘
Achievement Notification
┌──────────────────────────────────────────────────┐
│ 🏆 Achievement Unlocked! │✕│
├──────────────────────────────────────────────────┤
│ │
│ You've completed 100 tasks! Keep up the │
│ great work. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Share │ │ View Badge│ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
Component Behavior
Auto-Dismiss Functionality
- Timer-based: Automatically dismiss after specified duration
- Pause on Hover: Stop timer when user hovers over alert
- Resume on Leave: Continue timer when mouse leaves
- Persistent Override: Some alerts stay until manually dismissed
Animation States
- Enter: Slide in from edge with fade
- Exit: Slide out to edge with fade
- Hover: Subtle highlight or shadow
- Progress: Animated progress bars for loading states
Stacking Behavior
- Multiple Alerts: Stack vertically with spacing
- Max Count: Limit visible alerts, queue excess
- Position Management: Handle overlapping and positioning
- Cleanup: Remove dismissed alerts from DOM
Design Tokens
Visual Elements
┌─┐└┘─│= Alert container borders✓= Success icon⚠= Warning icon✗= Error iconℹ= Info icon⟳🔄= Loading/processing icons✕= Dismiss button░= Disabled/loading state
Color Mapping (ASCII patterns)
- Success:
█= Green background - Warning:
▓= Yellow/orange background - Error:
▓= Red background - Info:
▓= Blue background - Default:
░= Gray background
Related Components
- Toast: Temporary notification messages
- Banner: Persistent page-level announcements
- Modal: Blocking dialog for critical alerts
- Tooltip: Contextual help and information
Implementation Notes
This ASCII representation demonstrates alert patterns and states. When implementing:
- Animation System: Smooth enter/exit transitions
- Position Management: Handle multiple alerts and positioning
- Timer Management: Accurate auto-dismiss with pause/resume
- Accessibility: Proper announcement to screen readers
- Performance: Efficient rendering and cleanup
- Mobile Adaptation: Responsive sizing and positioning
Variants
- Toast Notification: Temporary messages that auto-dismiss
- Banner Alert: Full-width page announcements
- Inline Alert: Contextual messages within content
- Modal Alert: Blocking alerts requiring user action
- Status Alert: System status and maintenance messages
- Progress Alert: Loading and operation progress indicators