Skip to content

Overview

The Alert component displays contextual feedback messages to inform users about important information, successful actions, warnings, or errors. Alerts support different visual variants, optional icons, dismissible behavior via Alpine.js, and action slots for follow-up operations.

Use alerts for:

  • Form submission confirmations
  • Validation error summaries
  • System warnings and notices
  • Informational banners

Basic Usage

<x-aura::alert variant="info">
    This is an informational message.
</x-aura::alert>

Props

Prop Type Default Description
variant string 'info' Visual style: info, success, warning, danger
icon string|null null Custom icon name. Auto-selected from variant when null
dismissible bool false Show close button (uses Alpine.js x-show)
bordered bool true Add left border accent

Default icons per variant:

  • info -> info
  • success -> check-circle
  • warning -> alert-triangle
  • danger -> x-circle

Variants/Examples

Success Alert

<x-aura::alert variant="success">
    Your changes have been saved successfully.
</x-aura::alert>

Warning with Custom Icon

<x-aura::alert variant="warning" icon="clock">
    Your session will expire in 5 minutes.
</x-aura::alert>

Dismissible Danger Alert

<x-aura::alert variant="danger" dismissible>
    There was an error processing your request. Please try again.
</x-aura::alert>

Alert with Title Slot

<x-aura::alert variant="success">
    <x-slot:title>Payment Received</x-slot:title>
    Your payment of $49.00 has been processed. A receipt has been sent to your email.
</x-aura::alert>

Alert with Actions Slot

<x-aura::alert variant="warning" dismissible>
    <x-slot:title>Update Available</x-slot:title>
    A new version of the application is available.
    <x-slot:actions>
        <x-aura::button variant="outline" size="sm">Update Now</x-aura::button>
        <x-aura::button variant="ghost" size="sm">Dismiss</x-aura::button>
    </x-slot:actions>
</x-aura::alert>

Without Border

<x-aura::alert variant="info" :bordered="false">
    Borderless informational alert.
</x-aura::alert>

Slots

Slot Description
Default Main alert body content
title Optional heading displayed above the body
actions Optional action buttons displayed below the body

Events

The dismissible alert uses Alpine.js for its close behavior. When dismissed, the alert is hidden via x-show with a transition animation. No custom events are dispatched.

To programmatically control visibility from a parent Alpine component, wrap the alert and manage the state externally:

<div x-data="{ showAlert: true }">
    <x-aura::alert variant="info" x-show="showAlert">
        Controlled externally.
    </x-aura::alert>
    <button x-on:click="showAlert = !showAlert">Toggle</button>
</div>

Accessibility

  • The component renders with role="alert", which announces content to screen readers.
  • The dismiss button includes aria-label="Chiudi" for assistive technology.
  • Color is not the only indicator of variant -- each variant also has a distinct default icon.
  • Dismissible alerts use x-transition for smooth show/hide animations.
  • Focus management: after dismissal, focus returns to the natural tab order.