Skip to content

Feedback

Toast

Snackbar queue with swipe-to-dismiss, pause-on-hover and an optional action.

Toaster toast toasts
import { Toaster, toast, toasts } from '@anomalia/ui';

Notes

  • Mount <Toaster /> once near the root; call toast(...) from anywhere, including outside components.
  • The queue caps at three on screen — a stack of snackbars is the pattern being misused.
  • Set timeout: 0 for a message that must be acknowledged, and pair it with an action.

Examples

Basics

Mount <Toaster /> once at the root, then call toast() from anywhere — including outside components. On a phone, swipe a toast sideways to dismiss it.

API

toast(options)

PropTypeDefaultDescription
title / descriptionstringMessage body.
tone'neutral' | 'success' | 'warning' | 'danger' | 'info''neutral'Colour and live-region politeness.
timeoutnumber4000ms on screen; `0` waits for a dismissal.
action{ label, onclick }Single action button.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.