Alert

# Basics

If you need a notification on the page, you can use the moonshine::alert component.

<x-moonshine::alert>Alert</x-moonshine::alert>

<x-moonshine::alert>Alert</x-moonshine::alert>

Alert

# Notification type

You can change the notification type by specifying the type component.

Available types:

primary secondary success warning error info

<x-moonshine::alert type="primary">Primary</x-moonshine::alert>
<x-moonshine::alert type="secondary">Secondary</x-moonshine::alert>
<x-moonshine::alert type="success">Success</x-moonshine::alert>
<x-moonshine::alert type="info">Info</x-moonshine::alert>
<x-moonshine::alert type="warning">Warning</x-moonshine::alert>
<x-moonshine::alert type="error">Error</x-moonshine::alert>

<x-moonshine::alert type="primary">Primary</x-moonshine::alert>
<x-moonshine::alert type="secondary">Secondary</x-moonshine::alert>
<x-moonshine::alert type="success">Success</x-moonshine::alert>
<x-moonshine::alert type="info">Info</x-moonshine::alert>
<x-moonshine::alert type="warning">Warning</x-moonshine::alert>
<x-moonshine::alert type="error">Error</x-moonshine::alert>

Primary

Secondary

Success

Info

Warning

Error

# Icon

It is possible for a notification to change its icon; to do this, you need to pass it to the icon parameter.

<x-moonshine::alert icon="heroicons.academic-cap">Alert</x-moonshine::alert>

<x-moonshine::alert icon="heroicons.academic-cap">Alert</x-moonshine::alert>

Alert

For more detailed information, please refer to the section Icons .

# Deleting notifications

To remove notifications after some time, you need to pass the removable parameter with the value TRUE.

<x-moonshine::alert removable="true">Alert</x-moonshine::alert>

<x-moonshine::alert removable="true">Alert</x-moonshine::alert>

Alert