Toast
Short notifications created from JavaScript into a region that is already in the page. Messages are inserted as text, never HTML. Informational toasts auto-dismiss; danger ones never do and use role="alert". When more than max are visible, the rest wait in a queue instead of being dropped.
Toasts are created from JavaScript: Toast.get(region).show({ message: "Saved" }). The region above stays empty until an item is shown, and a danger toast never dismisses itself.
<div class="iv-toast-region" role="region" data-iv-component="toast" aria-label="Notifications"></div>
<p class="iv-u-text-sm iv-u-text-muted">Toasts are created from JavaScript: <code>Toast.get(region).show({ message: "Saved" })</code>. The region above stays empty until an item is shown, and a <code>danger</code> toast never dismisses itself.</p>Every other example on this site runs in a page of its own. This region does not: the buttons below have to call show() on the very region above them, and a region inside a frame could not be reached from this page. What you see is the fixture itself, running here.
Try it: the buttons below call show() on the region above (toasts appear at the bottom end of the viewport).
Declarative trigger
A served button can show a toast without a line of JavaScript: give it data-iv-toast with the id of the region and the text in data-iv-message. The region picks the click up through one delegated listener and calls show() with what the trigger carries — data-iv-title, data-iv-variant, data-iv-timeout and data-iv-dismissible. The message is read as text, never as HTML; an unknown variant falls back to info and a timeout that is not a number falls back to the region's. showFromTrigger(trigger) does the same thing from your own code.
<div id="notices" class="iv-toast-region" role="region" data-iv-component="toast" aria-label="Notifications"></div>
<div class="iv-u-flex iv-u-gap-3 iv-u-flex-wrap">
<button class="iv-button iv-button--primary" type="button" data-iv-toast="notices" data-iv-message="Profile saved." data-iv-title="Demo" data-iv-variant="success" data-iv-timeout="4000">Save (demo)</button>
<button class="iv-button iv-button--secondary" type="button" data-iv-toast="notices" data-iv-message="Export queued; nothing leaves this page." data-iv-timeout="6000">Export (demo)</button>
<button class="iv-button iv-button--ghost" type="button" data-iv-toast="notices" data-iv-message="The upload failed. This demo does not upload anything." data-iv-title="Upload" data-iv-variant="danger">Fail (demo)</button>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-4">These buttons are demos: they show a toast and do nothing else — no profile is saved, nothing is exported or uploaded. Each one carries <code>data-iv-toast="notices"</code> plus the text of the message, so no JavaScript is written by the author. A <code>danger</code> toast never dismisses itself. Without JavaScript the buttons do nothing at all.</p>// data-iv-component="toast"
{
toast: "notices",
message: "Profile saved.",
title: "Demo",
variant: "success",
timeout: 4000,
}This is sugar over show(), not a second way of working: the same queue, the same pause on hover and focus, the same refusal to auto-dismiss a danger message. Without JavaScript these buttons do nothing at all, which is why the fixture labels each one a demo — a button that promises to save something and does not is worse than no button.
API
import { Toast } from "@intervolutions/ivolt/toast";
const region = Toast.get(document.querySelector(".iv-toast-region"));
const item = region.show({ message: "Saved", variant: "success" });
item.dismiss();
region.clear();| Option | Where | Default |
|---|---|---|
placement | region, data-iv-placement | bottom-end |
max | region, data-iv-max | 3 |
variant | item | info (success warning danger) |
timeout | item, ms | 6000; 0 never; forced to 0 for danger |
dismissible | item | true |
Keyboard and timing
Hovering or focusing a toast pauses its timer. Escape on a focused toast dismisses it. Each item emits iv:open/opened/close/closed with reason timeout, trigger, escape or api.
Without JavaScript
Not applicable: toasts only exist when scripts create them. Render important outcomes inline as an alert as well.
Class index
Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.
| Class | What it does |
|---|---|
iv-toast--info | Informative tone (the default). |
iv-toast--warning | Warning tone. |
iv-toast--danger | Danger tone; it never closes on its own. |
iv-toast__title | Optional title line of the notice. |
iv-toast__message | Body of the notice, always plain text. |
iv-toast__body | Wrapper of title and message. |
iv-toast__dismiss | Close button of the notice. |
iv-toast-region--top-start | Region pinned to the top start corner. |
iv-toast-region--top-end | Top end corner. |
iv-toast-region--bottom-start | Bottom start corner. |
iv-toast-region--bottom-end | Bottom end corner (the default). |