Toast

A single success toast that confirms a completed background action and can be swiped or clicked away.

When to use

• One confirmation at a time in a fixed spot you position yourself: "Page saved", "Link copied".
• Not for several results that can pile up, warnings, errors, or actions such as Undo: use ToastStack. Not for persistent problems: use Alert.

Usage

import Toast from "@/components/iris/toast/toast";

const [open, setOpen] = useState(false);
// after saving
setOpen(true);

h(
  "div",
  { style: { position: "fixed", right: 16, bottom: 16 } },
  h(Toast, { title: "Page saved", description: "Roadmap is up to date on main.", open, onOpenChange: setOpen }),
);

Props

Prop	Type	Default	Description
title	string	—	Required. Headline; a changed title cross-fades while open.
description	string	—	Optional second line; the toast grows smoothly to fit.
open	boolean	true	Whether the toast is shown. Setting it true again re-raises a dismissed toast.
onOpenChange	(open: boolean) => void	—	Called with false on dismiss, swipe, or timeout. The auto-close timer only runs when this is set.
duration	number	4500	Milliseconds before it closes itself. 0 or less disables the timer.

Notes

• Renders inline (no portal or viewport); place it in your own fixed container. It always shows the success check icon.
• role="status" with aria-live="polite"; the close button is labelled "Dismiss notification".
• Drag horizontally to dismiss: past 80px or a quick flick throws it off with its velocity, a short drag springs back. Reduced motion disables drag and uses fades.
• Reads --surface, --page, --line, --ink, --ink-2, --ink-3, --green, --shadow-floating, --radius-panel.