Toast

Toast Component

The Toast component displays transient notifications for various types such as info, success, warning, danger, and custom messages. It supports auto-dismissal with smooth transitions, optional sound effects, and user interaction like pause on hover and manual dismissal. Notifications stack vertically and limit to the most recent 20.

Note

This component can change in the future!

Example Usage

<x-toast />

<!-- Trigger a message notification -->
<button x-on:click="$dispatch('notify', { variant: 'message', sender: { name: 'Jack Ellis', avatar: 'https://penguinui.s3.amazonaws.com/component-assets/avatar-2.webp' }, message: 'Hey, can you review the PR I just submitted? Let me know if you spot any issues!' })">Message</button>

<!-- Trigger an info notification -->
<button x-on:click="$dispatch('notify', { variant: 'info', title: 'Update Available', message: 'A new version of the app is ready for you. Update now to enjoy the latest features!' })">Info</button>

<!-- Trigger a success notification -->
<button x-on:click="$dispatch('notify', { variant: 'success', title: 'Success!', message: 'Your changes have been saved. Keep up the great work!' })">Success</button>

<!-- Trigger a danger notification -->
<button x-on:click="$dispatch('notify', { variant: 'danger', title: 'Oops!', message: 'Something went wrong. Please try again. If the problem persists, we’re here to help!' })">Danger</button>

<!-- Trigger a warning notification -->
<button x-on:click="$dispatch('notify', { variant: 'warning', title: 'Action Needed', message: 'Your storage is getting low. Consider upgrading your plan.' })">Warning</button>

Props

• closeIcon (string, default: "icon-x")
  CSS class for the icon used in the dismiss button on each notification.

• infoIcon (string, default: "icon-info")
  CSS class for the icon displayed in info notifications.

• successIcon (string, default: "icon-check")
  CSS class for the icon displayed in success notifications.

• warningIcon (string, default: "icon-triangle-alert")
  CSS class for the icon displayed in warning notifications.

• dangerIcon (string, default: "icon-x")
  CSS class for the icon displayed in danger notifications.

Overview

This Toast component handles showing multiple notification types with distinct visual styles and icons. Notifications appear stacked at the top-right or bottom-right of the screen depending on viewport size, and automatically disappear after a set duration (default 8 seconds). The component supports sound playback on notification, pause on hover, manual dismissal, and limits the maximum notifications shown to 20 for usability. Message-type notifications can include sender details such as avatar and name along with action buttons.

It is designed for integration with Alpine.js to handle dynamic notification display triggered via custom browser events, enabling easy notification dispatch from anywhere in your app.