Components

Alert

Basics

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

use MoonShine\UI\Components\Alert;
 
Alert::make()->content('Text'),
<x-moonshine::alert>Alert</x-moonshine::alert>

Notification type

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

Available types:

primary secondary success warning error info

Alert::make(type: 'primary')->content('Primary'),
Alert::make(type: 'secondary')->content('Secondary'),
Alert::make(type: 'success')->content('Success'),
Alert::make(type: 'warning')->content('Warning'),
Alert::make(type: 'error')->content('Error'),
Alert::make(type: 'info')->content('Text'),
<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>

Icon

There is an option to change the icon of the notification; for this, you need to pass it in the icon parameter.

Alert::make(icon: "academic-cap")->content('Text'),
<x-moonshine::alert icon="academic-cap">Alert</x-moonshine::alert>

For more detailed information, refer to the Icons section.

Removing notifications

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

Alert::make(removable: true)->content('Text'),
<x-moonshine::alert removable="true">Alert</x-moonshine::alert>