Alert

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections

# 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 component type

Available types:

success info warning error

<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="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>

Success

Info

Warning

Error

# Icon

The notification has the ability to change the icon, for this you need to pass it to the icon parameter

<x-moonshine::alert icon="heroicons.book-open">Alert</x-moonshine::alert>

<x-moonshine::alert icon="heroicons.book-open">Alert</x-moonshine::alert>

Alert

For more information, see Icons

# Removing notifications

To remove notifications after some time, you must pass the parameter removable with the value TRUE

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

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

Alert