Inlay Alerts

Quick start guide and documentation

5-Minute Setup

1 Include Files (Add to <head>)

Required Files • HTML

2 Include JavaScript (Add before </body>)

Required JavaScript • HTML

3 Add Alert Container to Your Page

Alert Container • HTML

4 Show an Alert

Generate Your First Alert • JavaScript

generateAlert({
    type: 'success',
    message: 'Welcome!',
    details: 'Your account has been created successfully.',
    location: '#alertContainer'
});
✓ Done! You now have working alerts.

5 Most Common Patterns

1. Form Success Message

Code • JavaScript

generateAlert({
    type: 'success',
    message: 'Form Submitted!',
    details: 'Thank you for your submission.',
    location: '#formAlerts',
    timeout: 5000  // Auto-close after 5 seconds
});

2. Form Error Message

Code • JavaScript

generateAlert({
    type: 'danger',
    message: 'Validation Error',
    details: 'Please check the highlighted fields.',
    location: '#formAlerts'
});

3. Info Notification

Code • JavaScript

generateAlert({
    type: 'info',
    message: 'New Feature Available',
    details: 'Check out our new dashboard layout!',
    location: '#alertContainer',
    dropShadow: 'alert-dropshadow-c'
});

4. Warning with Auto-Close

Code • JavaScript

generateAlert({
    type: 'warning',
    message: 'Session Expiring',
    details: 'Your session will expire in 5 minutes.',
    location: '#alertContainer',
    timeout: 10000  // Show for 10 seconds
});

5. Custom Styled Alert

Code • JavaScript

generateAlert({
    type: 'info',
    message: 'Custom Brand Alert',
    details: 'This matches our brand colors!',
    location: '#alertContainer',
    overrideBackgroundColor: '#9b59b6',
    overrideIcon: 'fa-star',
    dropShadow: 'alert-dropshadow-c'
});

Quick Reference

Alert Types

Type Color Best For Icon
success Green Confirmations, completed tasks ✓ Check circle
danger Red Errors, critical warnings ⚠ Triangle
warning Yellow Cautions, pending issues ⚠ Triangle
info Cyan Tips, announcements ℹ Info circle
default Gray Generic messages ℹ Info circle

Drop Shadow Options

Class Effect Best For
alert-dropshadow-a Deep inset Important alerts
alert-dropshadow-b Multi-layer Dramatic effect
alert-dropshadow-c Subtle inset Most common use ⭐
alert-dropshadow-d External shadow Lifted appearance

Static Alert Template

For alerts that are pre-rendered in HTML:

Static Alert HTML • HTML

In a Grid Layout

Grid Integration • HTML



    

        

            
            

                
Grid-aware alert

With Callbacks

Using Callbacks • JavaScript

generateAlert({
    type: 'info',
    message: 'Processing...',
    details: 'Please wait.',
    location: '#alerts',
    onShow: function() {
        // Start your process
        startProcess();
    },
    onClose: function() {
        // Clean up or redirect
        console.log('User dismissed alert');
    }
});

Complete Options Reference

All Available Options • JavaScript

generateAlert({
    // REQUIRED
    type: 'success',              // 'success', 'danger', 'warning', 'info', 'default'
    message: 'Title',             // Main heading
    details: 'Message text',      // Detailed message
    location: '#container',       // CSS selector (#id or .class)
    
    // OPTIONAL - Styling
    dropShadow: 'alert-dropshadow-c',   // Shadow class
    wrapMessage: 'true',                 // Wrap details in styled box
    animation: 'fade-in',                // CSS animation class
    overrideIcon: 'fa-star',             // Custom FontAwesome icon
    
    // OPTIONAL - Colors
    overrideBackgroundColor: '#9b59b6',  // Custom background
    overrideTextColor: '#ffffff',        // Custom text
    overrideTitleColor: '#ffffff',       // Custom title
    overrideIconColor: '#f1c40f',        // Custom icon
    overrideCloseColor: '#ffffff',       // Custom close button
    
    // OPTIONAL - Behavior
    timeout: 3000,                       // Auto-close after milliseconds
    onShow: function() { },              // Callback when shown
    onClose: function() { }              // Callback when closed
});

Troubleshooting

Alert Won't Close?

Dynamic Alert Not Showing?

Colors Look Wrong?

Pro Tips

✨ Tip 1: Use alert-dropshadow-c for most alerts—it's subtle and professional
✨ Tip 2: Always set a timeout for success messages—users don't need to manually close them
✨ Tip 3: Don't set timeout for error messages—users need time to read and act
✨ Tip 4: Use the onClose callback to trigger the next action in a workflow
✨ Tip 5: Keep messages under 2 sentences for better mobile experience

ADA Compliance Built-In

You don't need to do anything special—alerts are ADA-compliant by default:

  • ✅ Screen reader announcements with role="alert"
  • ✅ Descriptive labels with aria-label
  • ✅ Keyboard-accessible close buttons
  • ✅ High contrast colors (WCAG AA)
  • ✅ Proper focus management

Next Steps

See It In Action

Open inlay-alerts.html in your browser

Copy Examples

Use playground.html as a template

Read Details

Check INLAY-ALERTS-DOCUMENTATION.md for complete API