About
Provides both a static API (ArsToast.show(message, options))
and a declarative API (<ars-toast>).
Toasts stack in a fixed container, animate in/out, auto-dismiss, and can show
a reducing progress bar.
Severity Levels
ArsToast.show('Operation completed!', { severity: 'success' });
Positions
ArsToast.show('Toast at top-right', { position: 'top-right' });
Stacking
Click rapidly to see toasts stack.
Auto-Dismiss Duration
5000ms
ArsToast.show('Custom duration', { duration: 2000 });
Progress Bar
Shows a reducing progress bar at the top of the toast.
ArsToast.show('Saving...', { progress: true, duration: 4000 });
Non-Dismissible
ArsToast.show('No close button', { dismissible: false });
Declarative API
An open toast rendered directly in the page (duration 0 keeps it visible).
<ars-toast message="Saved!" severity="success" duration="5000" dismissible progress open></ars-toast>
Custom Mount Target
Toast mounted inside a bounded container:
const container = document.getElementById('bounded-target');
ArsToast.show('Inside container', { mountTarget: container, position: 'top-right' });
Event Monitor
Listening for ars-toast:dismiss...
Theme Toggle
Usage
import { ArsToast } from "ars-web-components";
// Static API
ArsToast.show("Operation complete!", {
severity: "success",
duration: 4000,
dismissible: true,
position: "top-right",
progress: true,
});
// Declarative API
// <ars-toast message="Saved" severity="success" duration="5000" dismissible open></ars-toast>
// Events
document.addEventListener("ars-toast:dismiss", (e) => {
console.log("Dismiss reason:", e.detail.reason);
});