Alert

You have 10 messages

Hey!

Ho!

I am using the default slot.

With actions

I have a shadow

Dismissible

Click the close icon

<x-alert title="You have 10 messages" icon="o-exclamation-triangle" />
 
<x-alert title="Hey!" description="Ho!" icon="o-home" class="alert-warning" />
 
<x-alert icon="o-exclamation-triangle" class="alert-success">
    I am using the <strong>default slot.</strong>
</x-alert>
 
<x-alert title="With actions" description="Hi" icon="o-envelope" class="alert-info">
    <x-slot:actions>
        <x-button label="See" />
    </x-slot:actions>
</x-alert>
 
<x-alert title="I have a shadow" icon="o-exclamation-triangle" shadow />
 
<x-alert title="Dismissible" description="Click the close icon" icon="o-exclamation-triangle" dismissible />

API

Prop	Description	Type	Default	Required
`title`	The title of the alert, displayed in bold.	string	NULL	false
`icon`	The icon displayed at the beginning of the alert.	string	NULL	false
`description`	A short description under the title.	string	NULL	false
`shadow`	Whether to apply a shadow effect to the alert.	bool	false	false
`dismissible`	Whether the alert can be dismissed by the user.	bool	false	false

Slot	Description
`actions`	Slots for actionable elements like buttons or links.

maryUI

Sponsor