Alert Component

The Alert component is a flexible, accessible component for displaying important messages that has to stay visible for a longer period of time.

Usage

The simplest way to use the alert component:

<x-alert>
    This is a basic alert message.
</x-alert>

Variants

The alert component supports four semantic variants to convey different types of messages:

<x-alert variant="info">Information message</x-alert>
<x-alert variant="success">Success message</x-alert>
<x-alert variant="warning">Warning message</x-alert>
<x-alert variant="danger">Danger message</x-alert>

With Title and Text

You can provide both a title and text for more structured alerts:

<x-alert variant="success" title="Payment Successful" text="Your payment has been processed successfully." />
<x-alert variant="warning" title="Warning" text="Please review your settings before continuing." />

With Icons

Enable icons by setting the showIcon prop to true. Each variant has a default icon:

<x-alert variant="info" :showIcon="true" title="Info" text="This is an informational message." />
<x-alert variant="success" :showIcon="true" title="Success" text="Operation completed successfully." />
<x-alert variant="warning" :showIcon="true" title="Warning" text="Please be careful." />
<x-alert variant="danger" :showIcon="true" title="Error" text="Something went wrong." />

Dismissible Alerts

Make alerts dismissible by setting the isDismissible prop to true. Users can close the alert by clicking the dismiss button:

<x-alert variant="info" :isDismissible="true" title="Dismissible Alert" text="You can close this alert." />

With Buttons

Add action buttons to alerts using the button prop. Combine with href for links, or pass Livewire directives like wire:click directly:

Button as Link

<x-alert variant="info" title="New Feature Available" text="Check out our latest update."
    button="Learn More" href="/features" />

Button with Livewire Action

<x-alert variant="warning" title="Action Required" text="Please confirm your email address."
    button="Resend Email" wire:click="resendEmail" />

Button with Dismissible

When using buttons with dismissible alerts, a "Dismiss" button appears next to the action button:

<x-alert variant="success" :isDismissible="true" title="Update Available"
    text="A new version is available." button="Update Now" href="/update" />

Using Slots

You can use the default slot for custom content when you don't provide title or text props:

<x-alert variant="info">
    <strong>Custom Content</strong>
    <p>You can put any HTML content here.</p>
</x-alert>

Props Reference

Prop	Type	Default	Description
variant	string	info	Visual style variant. Options: info, success, warning, danger
isDismissible	bool	false	Whether the alert can be dismissed by the user. Adds a close button and Alpine.js transition animations.
showIcon	bool	false	Whether to display an icon. Each variant has a default icon (info: information-circle, success: check-circle, warning: exclamation-triangle, danger: x-circle).
title	string|null	null	Optional title text displayed in a heading. If not provided, the default slot will be used.
text	string|null	null	Optional body text displayed below the title. If neither title nor text is provided, the default slot will be used.
button	string|null	null	Text label for an optional action button. Combine with href for links, or pass wire:click (or other wire directives) directly to the component for Livewire actions.
href	string|null	null	Optional URL for the button. When provided, the button renders as an anchor tag.
wire:click	string	-	Pass Livewire directives directly to the component. When button is provided without href, wire directives will be applied to the button. Supports wire:click, wire:target, wire:loading, and wire:confirm.

Slots

Slot	Description
Default slot	Custom content displayed when neither title nor text props are provided. Allows for flexible HTML content.

References

Category	Path / Name	Description
Component	resources/views/components/alert.blade.php	Alert component file

For the detailed documentation, please visit the Penguin UI Alerts.