Toast
Toasts require AlpineJS or Livewire to work.
Toast notifications are a great way to provide quick feedback to users. They can be used for success messages, error alerts, warnings, or general information. Toasts appear briefly, allowing users to stay informed without interrupting their workflow.
Notifications are children of a <x-toast> component, which by itself does not show on screen, is only used to position/size notifications and can be placed anywhere in the body of your page.
Usually, there will be exactly 1 toast to display data either on the top or bottom right of the screen, and it will be included into the layout of the page.
<!-- Responsive position and size -->
<x-toast class="top-0 left-0 md:bottom-0 md:left-[unset] md:right-0 md:top-[unset] md:max-w-md lg:max-w-lg"/>
Each notification is displayed as an alert by default and appears by dispatching the notify signal.
<!-- Message -->
<x-button x-data x-on:click="$dispatch('notify', { type: 'message', sender:{ name:'Rouen', avatar:'/assets/sightseeing/france/gros-horloge.webp'}, title: 'Sight of Medieval times', message: 'Come stroll and see the historical clock and highest Cathedral in France' })">Message</x-button>
<x-button variant="soft" x-data x-on:click="$dispatch('notify', { type: 'message', variant:'soft', sender:{ name:'Rouen', avatar:'/assets/sightseeing/france/gros-horloge.webp'}, title: 'Sight of Medieval times', message: 'Come stroll and see the historical clock and highest Cathedral in France' })">Message</x-button>
<x-button variant="outline" x-data x-on:click="$dispatch('notify', { type: 'message', variant:'outline', sender:{ name:'Rouen', avatar:'/assets/sightseeing/france/gros-horloge.webp'}, title: 'Sight of Medieval times', message: 'Come stroll and see the historical clock and highest Cathedral in France' })">Message</x-button>
<!-- Info -->
<x-button color="info" x-data x-on:click="$dispatch('notify', { type: 'info', title: 'Update Available', message: 'A new version of the app is ready for you.Update now to enjoy the latest features!' })">Info</x-button>
<x-button color="info" variant="soft" x-data x-on:click="$dispatch('notify', { type: 'info', variant:'soft', title: 'Update Available', message: 'A new version of the app is ready for you.Update now to enjoy the latest features!' })">Info</x-button>
<x-button color="info" variant="outline" x-data x-on:click="$dispatch('notify', { type: 'info', variant:'outline', title: 'Update Available', message: 'A new version of the app is ready for you.Update now to enjoy the latest features!' })">Info</x-button>
<!-- Success -->
<x-button color="success" x-data x-on:click="$dispatch('notify', { type: 'success', title: 'Success!', message: 'Your changes have been saved. Keep up the great work!' })">Success</x-button>
<x-button color="success" variant="soft" x-data x-on:click="$dispatch('notify', { type: 'success', variant:'soft', title: 'Success!', message: 'Your changes have been saved. Keep up the great work!' })">Success</x-button>
<x-button color="success" variant="outline" x-data x-on:click="$dispatch('notify', { type: 'success', variant:'outline', title: 'Success!', message: 'Your changes have been saved. Keep up the great work!' })">Success</x-button>
<!-- Warning Trigger -->
<x-button color="warning" x-data x-on:click="$dispatch('notify', { type: 'warning', title: 'Action Needed', message: 'Your storage is getting low.<br/>Consider upgrading your plan.' })">Warning</x-button>
<x-button color="warning" variant="soft" x-data x-on:click="$dispatch('notify', { type: 'warning', variant:'soft', title: 'Action Needed', message: 'Your storage is getting low.<br/>Consider upgrading your plan.' })">Warning</x-button>
<x-button color="warning" variant="outline" x-data x-on:click="$dispatch('notify', { type: 'warning', variant:'outline', title: 'Action Needed', message: 'Your storage is getting low.<br/>Consider upgrading your plan.' })">Warning</x-button>
<!-- Error -->
<x-button color="error" x-data x-on:click="$dispatch('notify', { type: 'error', title: 'Oops!', message: 'Something went wrong. Please try again.If the problem persists, we’re here to help!' })">Error</x-button>
<x-button color="error" variant="soft" x-data x-on:click="$dispatch('notify', { type: 'error', variant:'soft', title: 'Oops!', message: 'Something went wrong. Please try again.If the problem persists, we’re here to help!' })">Error</x-button>
<x-button color="error" variant="outline" x-data x-on:click="$dispatch('notify', { type: 'error', variant:'outline', title: 'Oops!', message: 'Something went wrong. Please try again.If the problem persists, we’re here to help!' })">Error</x-button>
Unless you are interacting with them (e.g. hovering the cursor), notifications disappear after some time (by default, 8secs). Use the duration attribute to tweak that behavior; the value is in ms. The next example will demonstate how to shorten the time a notification stays on screen.
Adding
Since it is the case on this page, we will omit it in the below examples.
x-data to your buttons is not required if their parent or one of their higher-level ancestor in the DOM already have it.Since it is the case on this page, we will omit it in the below examples.
#Multiple toasts
It is possible to add a <x-toast> element for each corner of the screen where you want to show notifications. This usually requires the listen-to attribute to a unique value (the default is notify) unless you want notifications to pop on several places of the screen.
<!-- Notifications to appear to the top right of the screen and stay on screen for 2000ms -->
<x-toast listen-to="notify_tr" duration="2000" class="top-0 left-[unset] right-0 md:max-w-lg"/>
<!-- 2 Toasts with the same listen-to attribute will conflict -->
<x-toast listen-to="notify_conflict" class="top-[unset] bottom-0 left-[unset] right-0 md:max-w-lg"/>
<x-toast listen-to="notify_conflict" duration="2000" class="top-0 left-[unset] right-0 md:max-w-lg"/>
Then the code to trigger a notification will simply be:
<x-button variant="soft" x-on:click="$dispatch('notify_tr', { type: 'message', variant:'soft', sender:{ name:'Rouen', avatar:'/assets/sightseeing/france/gros-horloge.webp'}, title: 'Sight of Medieval times', message: 'Come stroll and see the historical clock and highest Cathedral in France.' })">Notify to top-right</x-button>
<x-button variant="soft" x-on:click="$dispatch('notify_conflict', { type: 'warning', title: 'I appear twice', message: 'Also note how I cover notifications in other areas.' })">Notify to 2 areas</x-button>
#Sender
If the message has a sender, its appearane will be changed to match that of a message on other applications
<x-button x-on:click="$dispatch('notify', { type: 'message', shape: 'chat-bubble', sender:{ name:'Antoine de St-Exupéry', avatar:'/assets/profile/ase.jpg'}, title: 'Welcome', message: 'On ne voit bien qu\'avec le coeur. L\'essentiel est invisible pour les yeux.' })">Message</x-button>
#Custom HTML
While the default behavior of displaying alerts is convenient, you can dispatch an object with only the html property to have anything rendered in the notification.
Remember to escape/encode the characters of the HTML code you write so it can be included into Javascript.
<x-button x-on:click="$dispatch('notify', { html:
'<div class="bg-base-200 rounded-sm min-w-100 p-2 "> \
<div class="skewed-gallery gap-[3px] h-40 -ms-2 -mt-2 -me-2"> \
<img src="/assets/sightseeing/france/gros-horloge.webp"> \
<img src="/assets/sightseeing/france/carcassone.webp"> \
<img src="/assets/sightseeing/france/grand-palais.webp"> \
<img src="/assets/sightseeing/france/arles.jpg"> \
<img src="/assets/sightseeing/france/lavande.webp"> \
<img src="/assets/sightseeing/france/rocamadour.jpg"> \
<img src="/assets/sightseeing/france/chenonceau.webp"> \
<img src="/assets/sightseeing/france/mont-saint-michel.webp"> \
</div> \
Sightseeing in France \
</div>' })">Message</x-button>