Plume UI

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 destructive 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 destructive alert with a title.

Closable & Auto-close

This is a closable info alert.

Auto-closing

This alert will close in 3 seconds.

Warning

This is a closable warning alert with a title.

Properties

Prop Type Default Description
title string null Optional bold heading for the alert.
style string info Visual style: info, success, warning, destructive.
icon string null Override the default icon class.
closable boolean false Whether to show a close button.
autoclose number null Delay in ms to hide the alert automatically.

Usage

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