Feedback · astro-ui/toaster · Toaster / toast

ToastJS

Notification toasts with actions, positions, and expand.

Toaster renders stacked notification toasts. Import the toast function, place <Toaster /> once in your layout, and fire from anywhere: six semantic helpers, action buttons, per-toast positions, durations, expand/collapse stacks, and swipe-free dismiss. The store is a tiny module — no framework island.

← All components

Features

  • 6 helpers: toast, success, error, warning, info, loading
  • action: { label, onClick } — dismisses after it runs
  • 6 position corners; per-toast position
  • Stacked expand: collapsed stacks, hover to expand, expand option
  • description, duration, dismissible options
  • toast.update for loading → result flows
  • Rich-color card tier + always-on accent icons

Usage

---
import { Toaster } from "astro-ui";
import "astro-ui/toast.css";
---
<body>
  <Toaster />
</body>
<script>
  import { toast } from "astro-ui/toast";
  toast.success("Saved!");
  toast("Event has been created", {
    action: { label: "Undo", onClick: () => console.log("Undo") },
  });
</script>

Demos

Basic variants

              import { toast } from "astro-ui/toast";

toast("Event has been created");
toast.success("Saved!");
toast.error("Something broke");

              All modes

              import { toast } from "astro-ui/toast";

toast("Event has been created");            // default (neutral)
toast.success("Changes saved");
toast.error("Failed to save");
toast.warning("Storage almost full");
toast.info("New version available");
toast.loading("Uploading…");               // persists until update/dismiss

              Description & styling

              toast.warning("Storage almost full", {
  description: "You have used 93% of your plan. Upgrade to keep syncing.",
  richColors: true,
  closeButton: true,
  duration: 8000,
});

toast.info("Deploy finished", { description: "32 files changed in 4.2s" });

              With action

              toast("Event has been created", {
  action: {
label: "Undo",
onClick: () => console.log("Undo"),
  },
});

              Custom position

              toast("Top-left position", { position: "top-left" });

              Loading flow

              const id = toast.loading("Uploading…");
setTimeout(() => toast.update(id, { type: "success", title: "Uploaded!" }), 1500);

              Expand control

              First fires a collapsed stack — hover it to expand. Second stays open: every toast pins its stack with expand: true.

              {/* Default: stack of 2+ collapses — hover to expand */}
for (const msg of ["First", "Second", "Third"]) {
  toast(msg, { duration: 10000 });
}

{/* Pin the stack open — no hover needed */}
for (const msg of ["First", "Second", "Third"]) {
  toast(msg, { expand: true, duration: 10000 });
}

              API

              Props

              PropTypeDefaultDescription
              titlestringrequiredFirst argument — the message.
              options.descriptionstring—Secondary line.
              options.type"default" | "success" | "error" | "warning" | "info" | "loading""default"Variant (helpers set this).
              options.action{ label: string; onClick: (e: MouseEvent) => void }—Action button; toast dismisses after it runs.
              options.position6 corner union"bottom-right"Which stack receives it.
              options.durationnumber4000Ms until auto-dismiss; Infinity to persist.
              options.dismissiblebooleantrueShow the × button.
              options.expandbooleanfalsePin this toast's stack open.
              options.richColorsbooleanfalseTint the whole card, not just the icon.
              options.rolestringby typeARIA role override.

              Accessibility

              Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

              • Six position stacks use aria-live="polite" + aria-atomic="true" so notifications announce without interrupting
              • aria-relevant limits re-announcements to additions
              • Role by type (status/alert) with per-type override via the role option

              FAQ

              Where does <Toaster /> go?

              Once in your base layout — it renders the six fixed stacks. Fire toasts from any script on any page.

              How do two positions show at once?

              Each toast routes to the stack matching its position option — stacks are independent, so bottom-right and top-left toasts coexist.

              Expand behavior?

              Stacks of 2+ collapse: older cards tuck behind the newest. Hover or focus expands; pass expand: true to pin a stack open.

              Changelog

              Version history mentioning Toast.

              v0.1.0 — 2026-11-11
              added
              • Feedback (6): Alert, Spinner, Skeleton, Toast, Banner, NotificationCenter.