Portal UI : Toast

Toast

A succinct message that is displayed temporarily.

<div x-data> <!-- x-data is required on root tag, you can put on body  -->
    <x-portal::toast  position="top-right"/> <!-- This is required, you can register this tag one your root layout  -->
    <x-portal::button 
        variant="outline"
        x-on:click="$dispatch('toast',{
                title : 'Scheduled: Catch up',
                message : 'Friday, February 10, 2023 at 5:57 PM'
        })"
    >
        Show Alert
    </x-portal::button>
</div>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:toast --force

Position

@php
    $positions = ['bottom-right','bottom-left','bottom-center','top-right','top-left','top-center']
@endphp
@foreach($positions as $position)
    <x-portal::button 
        variant="outline"
        x-on:click="$dispatch('toast',{
                title : 'Scheduled: Catch up',
                message : 'Friday, February 10, 2023 at 5:57 PM',
                position : '{{$position}}'
        })"
    >
        {{$position}}
    </x-portal::button>
@endforeach

Variant

<x-portal::button variant="danger" 
    x-on:click="$dispatch('toast',{
        variant : 'danger',
        title : 'Uh oh! Something went wrong.',
        message : 'There was a problem with your request.'
    })"
>
    Danger
</x-portal::button>
<x-portal::button class="!bg-green-500" 
    x-on:click="$dispatch('toast',{
        variant : 'success',
        title : 'Congratulations!',
        message : 'Your changes have been saved. Keep up the great work!'
    })"
>
    Success
</x-portal::button>

With Action

<x-portal::button variant="outline"
    x-on:click="$dispatch('toast',{
        variant : 'danger',
        title : 'Uh oh! Something went wrong.',
        message : 'There was a problem with your request.',
        action : {
            label : 'Try Again',
            do : () => {console.log('oke')}
        }
    })"
>
    Show Toast
</x-portal::button>

Via JavaScript

<x-portal::button variant="outline" onclick="toast()">Show Toast</x-portal::button>
// ..
@push('scripts')
    <script>
        function toast() {
            window.dispatchEvent(new CustomEvent('toast', {
                detail: {
                    title: 'Scheduled: Catch up',
                    message: 'Friday, February 10, 2023 at 5:57 PM'
                }
            }))
        }
    </script>
@endpush

Available toast config

This detail object configuration that you can pass to toast event :

{
    variant : "", //available : success , danger , default
    title : "",
    message : "",
    duration : 8000, // notification duration before close
    action : {
        label : "", // display action label
        do : () => {
            // your code
        }
    },
    position : "", // avilable bottom-right , bottom-left , bottom-center , top-right , top-left , top-center
}
// you can also put default position into toast tag