<div align="center">
  <img width="48" height="48" src="https://raw.githubusercontent.com/andreruffert/toast-queue/refs/heads/main/icon.svg" alt="toast-queue">
  <h1>toast-queue</h1>

  [![Test status](https://img.shields.io/github/actions/workflow/status/andreruffert/toast-queue/test.yml?label=Test&logo=github&color=1a1a1a&labelColor=242424)](https://github.com/andreruffert/toast-queue/actions/workflows/test.yml)
  [![npm version](https://img.shields.io/npm/v/toast-queue?color=1a1a1a&labelColor=242424)](https://npmx.dev/package/toast-queue/versions)
  [![npm downloads](https://img.shields.io/npm/dm/toast-queue?logo=npm&color=1a1a1a&labelColor=242424)](https://npmx.dev/package/toast-queue)
  [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/toast-queue?color=1a1a1a&labelColor=242424)](https://www.jsdelivr.com/package/npm/toast-queue)
</div>

---

> Accessible, customizable toast notifications for modern web apps.

## Features

- Framework agnostic: Vanilla JavaScript with zero runtime dependencies.
- Customizable: Bring your own CSS or start with the included presets.
- Accessible: Screen-reader announcements via [`ariaNotify()`](#browser-support), keyboard dismissal with <kbd>Escape</kbd>, and focus management.
- Top layer: Uses the browser’s top layer and ensures it stays on top of other top-layer elements.
- Touch-friendly: Swipe to dismiss on touch devices.
- Progressively enhanced: Uses modern browser APIs where available and falls back where possible.

## Documentation

- [Website](https://toast-queue.js.org)

## API reference

- [API reference](./API.md)

## License

Distributed under the MIT license. See LICENSE for details.

© [André Ruffert](https://andreruffert.com)
