A unstyled, accessible Vanilla JS library to display brief, temporary toast messages.

• Framework agnostic: Vanilla JavaScript without dependencies.
• Headless UI: Complete styling control without any pre-defined visual styles.
• Accessible: Toasts are rendered in a landmark region and follow the ARIA alertdialog pattern.
• Focus management: When a toast closes, the focus shifts to the next or previous toast, if available.
• View Transition API ready: Smooth animations using modern browser features.
• Touch-friendly swiping: Native gesture support for dismissing toasts.

To start using the library, install it via npm:

npm install toast-queue

Create a new ToastQueue instance. This will be the place where all your toasts will be rendered.

import ToastQueue from 'toast-queue'

// ...

const toastQueue = new ToastQueue();

Then, you can use the provided ToastQueue API to trigger a toast from anywhere.

<button onclick="toastQueue.add('Toast message...');">Trigger toast</button>

• API reference

Distributed under the MIT license. See LICENSE for details.

© André Ruffert