Toast

# Basics

You can create notifications using the moonshine::toast component.

<x-moonshine::toast content="Message toast" />

<x-moonshine::toast content="Message toast" />

Available types:

primary secondary success warning error info

<x-moonshine::toast type="success" content="Message success toast" />

<x-moonshine::toast type="success" content="Message success toast" />

# Without using a component

You can also create a notification using the MoonShineUi::toast() method.

use MoonShine\MoonShineUI;
 
MoonShineUI::toast('Toast content', 'error');

use MoonShine\MoonShineUI;

MoonShineUI::toast('Toast content', 'error');

# JS

// native js
dispatchEvent(
    new CustomEvent('toast', {
        detail: {type: 'success', text: 'SomeText'}
    })
)
 
// AlpineJs inside the component
this.$dispatch('toast', {type: 'error', text: 'Error'})
 
// AlpineJs outside the component
$dispatch('toast', {type: 'error', text: 'Error'})

// native js
dispatchEvent(
    new CustomEvent('toast', {
        detail: {type: 'success', text: 'SomeText'}
    })
)

// AlpineJs inside the component
this.$dispatch('toast', {type: 'error', text: 'Error'})

// AlpineJs outside the component
$dispatch('toast', {type: 'error', text: 'Error'})