InlineAlert Component

InlineAlert

A messaging component that displays contextual information with optional title, body text, and dismissal functionality. Supports four semantic variants with trauma-informed messaging principles.

Variants

Info (default)

Information

This is an informational message to help you understand the current situation.

Success

Your action has been completed successfully. You're all set!

Warning

Important Notice

Please review this information carefully before proceeding. Your attention is needed.

Error

Action Required

We encountered an issue that needs your attention. Please review the details below.

Title Only

Quick update available

Profile updated successfully

Body Only (Slot)

This alert uses the default slot for body content without a title.

Your session will expire in 5 minutes. Please save your work.

Dismissable

Dismissable Info

Click the close button to dismiss this alert. It will animate out smoothly.

Dismissable Success

This success message can be dismissed when you're done reading it.

Dismissable Warning

Important warnings can also be dismissed after acknowledgment.

Dismissable Error

Even error messages can be dismissed once the user has read them.

Trauma-Informed Messaging

Examples demonstrating empowering, non-alarming language that respects user agency.

Zika Risk Information Available

We have updated risk information for your area. You can review it at your convenience to make informed decisions about your health.

Consider Protective Measures

Based on current conditions, you may want to consider using mosquito repellent. This is a suggestion to help you stay comfortable and protected.

Your Preferences Saved

Your notification preferences have been updated. You're in control of what information you receive and when.

We Need Your Help

We couldn't complete your request right now. When you're ready, please try again or contact support if you need assistance.

Rich Content (Slot)

Multiple Paragraphs

The slot allows for rich content including multiple paragraphs, lists, and formatted text.

This provides flexibility for more complex messaging needs while maintaining consistent styling.

Support for lists
Multiple content blocks
Flexible formatting

Accessibility Features

ARIA Roles:

Error variant uses role="alert" with aria-live="assertive"
Other variants use role="status" with aria-live="polite"

Icon Accessibility:

Icons include descriptive titles for screen readers
Semantic color coding with sufficient contrast ratios

Dismissable Alerts:

Close button has clear aria-label
Smooth transitions with Alpine.js
Keyboard accessible

Usage Example



    
    
            
    
    
    
                    
    Information
                
                    
    This is an informational message.
            
    
    
    


    
    
            
    
    
    
                    
    Important Notice
                
                    
    Custom content using the slot for more flexibility.
            
    
    
            
                    
    


    
    
            
    
    
    
                    
    Action Required
                
                    
    Please review the details below.

Props

Prop	Type	Default	Description
variant	string	'info'	Alert variant: info, success, warning, error
title	string\|null	null	Optional alert title
body	string\|null	null	Optional alert body text (alternative to slot)
dismissable	boolean	false	Show close button for dismissal
class	string	''	Additional CSS classes