Alert Component

A flexible alert component for displaying important messages to users. Supports multiple variants, icons, and custom content via slots.

Props

• variant - string|null - 'primary' | 'success' | 'warning' | 'error' | 'info' (default: 'primary')
• icon - string|null - FontAwesome icon name (e.g., 'check-circle', 'exclamation-triangle')
• title - string|null - Alert title text
• message - string|null - Alert message text

Slots

• title - Custom title content (overrides title prop)
• message - Custom message content (overrides message prop)
• default - Default slot (used when no message prop or slot provided)

Variants

• primary - Uses accent color from theme
• success - Green color scheme
• warning - Yellow color scheme
• error - Red color scheme
• info - Sky/blue color scheme

Features

• • Multiple color variants
• • Optional icon support
• • Title and message props
• • Slot-based content for flexibility
• • HTML content support in slots
• • Dark mode support
• • Responsive design

Common Use Cases

<x-alert variant="success" title="Success" message="Operation completed!" />

<x-alert variant="error" icon="times-circle" title="Error" message="Something went wrong." />

<x-alert variant="warning">
    <x-slot:title>Warning</x-slot:title>
    Custom message with <strong>HTML</strong>.
</x-alert>

<x-alert variant="info" message="Here is some information." />