Alert

Alerts display short, important messages in a way that attracts the user's attention without interrupting the user's task.

Installation

Add the alert component to your project:

npx velyx add alert

pnpm dlx velyx add alert

yarn dlx velyx add alert

bunx --bun velyx add alert

Usage

Default Alert

```blade
    

            
Update available
        

        A new version is available. Please update to get the latest features.
    

Success Alert

```blade
    

            
Success
        

        Your changes have been saved successfully.
    

Destructive Alert

```blade
    

            
Error
        

        Failed to save your changes. Please try again.
    

Warning Alert

```blade
    

            
Warning
        

        Please review this important warning message.
    

Info Alert

```blade
    

            
Information
        

        Here is some useful information for you.
    

Non-dismissible Alert

```blade
    

            
Important Notice
        

        This alert cannot be dismissed and requires your attention.
    

Alert Without Title

```blade
    

        

        This is an alert message without a title.
    

Props

Variants

• default - Default gray styling
• success - Green styling with check icon
• destructive - Red styling with alert icon
• warning - Amber/yellow styling with warning icon
• info - Blue styling with info icon

Examples

Form Success Message

```blade
    

            
Account Created
        

        
Your account has been successfully created. You can now log in.
        Go to login page →
    

Form Validation Errors

```blade
    

            
Validation Errors
        

        

            
Email field is required
            
Password must be at least 8 characters
        
    

System Status

```blade
    

            
Scheduled Maintenance
        

        
System maintenance is scheduled for March 10, 2026 at 2:00 AM UTC.
        
Expected downtime: approximately 2 hours.
    

Custom Icon

```blade
    

            
Pro Tip
        

        You can use keyboard shortcuts to navigate faster. Press ? to see all shortcuts.
    

Customization

You can customize the alert component by modifying the variant classes:

@

@props([
    'variant' => 'default',
    'dismissible' => false,
    'title' => null,
    'icon' => null,
])

@php
$variantClasses = match($variant) {
    'success' => 'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800 text-emerald-900 dark:text-emerald-100',
    'destructive' => 'bg-destructive/10 border-destructive/20 text-destructive',
    // ... add your custom variants
};
@endphp

<div {{ $attributes->class(['relative w-full rounded-lg border p-4', $variantClasses]) }}>
    {{ $slot }}
</div>

Accessibility

Alerts include:

• ARIA role="alert" - Screen readers announce alerts immediately
• Dismissible button - Properly labeled for screen readers
• Color contrast - Meets WCAG AA standards
• Keyboard accessible - Dismissible via keyboard

Animation

Alerts include smooth transitions for dismiss action:

• Fade in - Smooth appearance
• Scale - Subtle scale effect
• Fade out - Smooth dismissal

Next Steps

• Explore Button component
• Learn about Modal component
• View Input component