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

Notification type

You can change the type of the notification by specifying the type parameter 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'),
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>
<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'),
Alert::make(icon: "academic-cap")
    ->content('Text'),
<x-moonshine::alert icon="academic-cap">
    Alert
</x-moonshine::alert>
<x-moonshine::alert icon="academic-cap">
    Alert
</x-moonshine::alert>

For more detailed information, refer to the Icons section.

Removing notifications

So that notifications are deleted after some time, you need to pass the removable parameter with the value true.

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