Toaster

Vanilla JavaScript notifications, positioned at the top center. Uses shared color, surface, typography and radius tokens and the shared Button for dismissal.

import "@k4k3ru/design-system-button/style.css";
import "@k4k3ru/design-system-toaster/style.css";
import { Toaster } from "@k4k3ru/design-system-toaster";

const toaster = new Toaster();
toaster.show({ id: "catalog", message: "Could not load the catalog. Try again.", type: "error" });
toaster.dismiss("catalog");
toaster.clear();
toaster.destroy(); // Remove listeners, DOM and timers on teardown.

• Types: error, info, success, warning. Plain text only; never inject HTML.
• Default duration: 8000ms; 0 keeps a notification until dismissed.
• Hover, focus within a toast and a hidden document pause the remaining timeout.
• A stable id replaces/deduplicates related messages. At most three are visible.
• Notifications do not steal focus. Error messages use alert; others use status.
• Close is a keyboard-operable Button. Escape dismisses the focused notification.
• Safe-area spacing, narrow screens, dark tokens, forced colors and reduced motion are supported. Override --toaster-z-index and --toaster-shadow when required.
• Keep important state and recovery controls on the page after a toast disappears.
• Create one instance per application/page; destroy it on teardown.
• Import Button CSS in the consuming application. No third-party JS is required.
• Modal top-layer content needs its own notification surface; this fixed page-level implementation is intended for ordinary page notifications.

References: the supplied noknow toaster (MIT, notice retained in LICENSE), https://m3.material.io/components/snackbar/overview and https://ui.shadcn.com/docs/components/base/toast. The implementation follows this design system's tokens and native DOM conventions. Build with npm run build from this directory.

Smaller size

Use toaster--smaller / toast--smaller on the component root. Toast padding and gap; message and close button sizes unchanged.

See shared sizing guidance and examples.