Toast
Toast is a native web component (zero dependencies) for showing short, non-blocking messages. `<pura-toaster>` is a fixed container (an aria-live polite region) that stacks the toasts in a corner, and each `<pura-toast>` animates in, pauses on hover, and disappears on its own after the duration. In practice you use the imperative function `toast(message, opts)` (and the shortcuts `toast.success/error/warning/info`), which creates the default toaster automatically. Use it to confirm actions, warn about errors, or give quick feedback without interrupting the flow.
Preview
<pura-toaster position="bottom-right"></pura-toaster>
<div style="display:flex; gap:.5rem; flex-wrap:wrap;">
<button id="t-info" type="button">Show info</button>
<button id="t-ok" type="button">Success</button>
<button id="t-err" type="button">Error with action</button>
</div>
<script type="module">
import { toast } from "/pura/lib/toast.js";
document.getElementById("t-info").addEventListener("click", () => {
toast("Your changes were saved as a draft.", { title: "Draft saved" });
});
document.getElementById("t-ok").addEventListener("click", () => {
toast.success("Payment confirmed successfully!", { title: "All set" });
});
document.getElementById("t-err").addEventListener("click", () => {
toast.error("We couldn't upload the file.", {
title: "Upload failed",
duration: 8000,
action: { label: "Try again", onClick: () => toast.info("Resending...") },
});
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
position | "bottom-right" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | bottom-right | Corner where <pura-toaster> stacks the toasts (an invalid value falls back to the default). |
title | string | — | Optional bold title for the <pura-toast>. |
variant | "info" | "success" | "warning" | "danger" | info | Accent color and icon for the <pura-toast>. |
duration | number (ms) | 4000 | Time until auto-dismiss; 0 or negative keeps the toast pinned. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/toast.js"></script>import "./pura/lib/toast.js";