Alert

Displays a callout for user attention.

Examples

Basic Styles

This is an info alert.

This is a success alert.

This is a warning alert.

This is a error alert.

blade

<x-plume::alert>This is an info alert.</x-plume::alert>
...
<x-plume::alert style="error">This is a error alert.</x-plume::alert>

With Titles

Info

This is an info alert with a title.

Success

This is a success alert with a title.

Warning

This is a warning alert with a title.

Destructive

This is a error alert with a title.

blade

<x-plume::alert title="Info">This is an info alert with a title.</x-plume::alert>
...
<x-plume::alert style="error" title="Destructive">This is a error alert with a
    title.</x-plume::alert>

Closable & Auto-close

This is a closable info alert.

Auto-closing

This alert will close in 3 seconds.

blade

<x-plume::alert closable>This is a closable info alert.</x-plume::alert>

<x-plume::alert style="success" closable autoclose="3000" title="Auto-closing">
    This alert will close in 3 seconds.
</x-plume::alert>

Prop	Type	Default	Description
icon	string	null	Iconify icon name. Auto-selected based on style if not provided.
style	string	'info'	Semantic style: 'info', 'success', 'warning', 'error'.
closable	bool	false	Whether to show a close button.
autoclose	int	null	Delay in milliseconds before automatically closing.
title	string	null	Bold title text for the alert.
onClose	string	null	AlpineJS expression or function to call when the alert is closed.

Usage

blade

<x-plume::alert style="success" title="Success!">
    Your changes have been saved.
</x-plume::alert>