DefaultVisualStatusProminenceActionsEventsPositionAlignmentLegacyBehaviorTriggerShadowRootBodyAnchor
<nve-toast id="toast" close-timeout="1500">hello there</nve-toast>
<nve-button popovertarget="toast">button</nve-button>
Edit Example
A contextual popup that displays a status. Toasts are triggered by clicking, focusing, or tapping an element and cannot have interactive elements within them. MDN Popover API
<nve-toast anchor="btn">hello there</nve-toast>
<nve-button id="btn">button</nve-button>
Edit Example
Visual example of toast structure with anchor positioning for consistent implementation patterns across your application.
<div nve-layout="row align:center" style="height: 200px">
<nve-toast position="top">default</nve-toast>
<nve-toast status="success" position="right">success</nve-toast>
<nve-toast status="warning" position="bottom">warning</nve-toast>
<nve-toast status="danger" position="left">danger</nve-toast>
</div>
Edit Example
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
Status Description accent Highlights important actions or draws attention to primary interactive elements. warning Indicates cautionary actions that require careful consideration before proceeding. success Represents positive outcomes, confirmations, or constructive actions. danger Signals destructive or irreversible actions that need extra attention and confirmation.
<nve-toast position="top" prominence="muted">muted</nve-toast>
Edit Example
Controls the visual prominence to establish hierarchy and guide user attention.
Prominence Description muted Reduces visual weight for supporting content that should remain subtle and unobtrusive.
<div nve-layout="row align:center" style="height: 200px">
<nve-toast position="top"> default <nve-button container="inline">action</nve-button> </nve-toast>
<nve-toast status="success" position="right"> success <nve-button container="inline">action</nve-button> </nve-toast>
<nve-toast status="warning" position="bottom"> warning <nve-button container="inline">action</nve-button> </nve-toast>
<nve-toast status="danger" position="left"> danger <nve-button container="inline">action</nve-button> </nve-toast>
</div>
Edit Example
Toast with inline action buttons for quick follow-up actions. Use sparingly for important actions like "Undo" or "View", but prefer simple toasts without actions for most feedback to maintain lightweight nature.
<nve-toast id="toast">hello there</nve-toast>
<nve-button popovertarget="toast">button</nve-button>
<script type="module">
const toast = document.querySelector("nve-toast");
toast.addEventListener("beforetoggle", () => console.log("beforetoggle"));
toast.addEventListener("toggle", () => console.log("toggle"));
toast.addEventListener("close", () => console.log("close"));
toast.addEventListener("open", () => console.log("open"));
</script>
Edit Example
Event Description close Dispatched when the toast closes.
Dispatched when the toast opens.
Dispatched on a popover element just after showing or hiding. MDN
Dispatched on a popover just before showing or hiding. MDN
<nve-toast anchor="btn" position="top">top</nve-toast>
<nve-toast anchor="btn" position="right">right</nve-toast>
<nve-toast anchor="btn" position="bottom">bottom</nve-toast>
<nve-toast anchor="btn" position="left">left</nve-toast>
<nve-button id="btn">button</nve-button>
Edit Example
Determines the position of an element along both inline and block axis. MDN
Position Description center Centers the popover directly over the anchor element. top Positions the popover above the anchor element. bottom Positions the popover below the anchor element. left Positions the popover to the left side of the anchor element. right Positions the popover to the right side of the anchor element.
<nve-card id="card" style="width: 450px; height: 300px"></nve-card>
<nve-toast anchor="card" position="top" alignment="start">top start</nve-toast>
<nve-toast anchor="card" position="top">top center</nve-toast>
<nve-toast anchor="card" position="top" alignment="end">top end</nve-toast>
<nve-toast anchor="card" position="right" alignment="start">right start</nve-toast>
<nve-toast anchor="card" position="right">right center</nve-toast>
<nve-toast anchor="card" position="right" alignment="end">right end</nve-toast>
<nve-toast anchor="card" position="bottom" alignment="start">bottom start</nve-toast>
<nve-toast anchor="card" position="bottom">bottom center</nve-toast>
<nve-toast anchor="card" position="bottom" alignment="end">bottom end</nve-toast>
<nve-toast anchor="card" position="left" alignment="start">left start</nve-toast>
<nve-toast anchor="card" position="left">left center</nve-toast>
<nve-toast anchor="card" position="left" alignment="end">left end</nve-toast>
Edit Example
Determines the alignment of the popover relative to the provided anchor element.
Alignment Description start Aligns the popover to the beginning edge of the anchor for left or top alignment. end Aligns the popover to the ending edge of the anchor for right or bottom alignment. center Centers the popover along the anchor's edge for balanced positioning.
Legacy Behavior Trigger
test-case
<div nve-layout="row align:center" style="height: 90vh">
<nve-button id="btn">copy to clipboard</nve-button>
<nve-toast trigger="btn" behavior-trigger position="top" close-timeout="1500" hidden>copied!</nve-toast>
</div>
Edit Example
Legacy behavior-trigger pattern for automatic toast lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler toast implementation and better maintainability.
<toast-test-shadow-root></toast-test-shadow-root>
<script type="module">
customElements.define(
"toast-test-shadow-root",
class ToastTestShadowRoot extends HTMLElement {
constructor() {
super();
this._shadow = this.attachShadow({ mode: "open" });
const template = document.createElement("template");
template.innerHTML = `
<style>:host { box-sizing: border-box; }</style>
<nve-toast size="sm">center</nve-toast>
<nve-toast size="sm" position="top">top center</nve-toast>
<nve-toast size="sm" position="top" alignment="start">top start</nve-toast>
<nve-toast size="sm" position="top" alignment="end">top end</nve-toast>
<nve-toast size="sm" position="right" alignment="start">right start</nve-toast>
<nve-toast size="sm" position="right">right center</nve-toast>
<nve-toast size="sm" position="right" alignment="end">right end</nve-toast>
<nve-toast size="sm" position="bottom" alignment="start">bottom start</nve-toast>
<nve-toast size="sm" position="bottom">bottom center</nve-toast>
<nve-toast size="sm" position="bottom" alignment="end">bottom end</nve-toast>
<nve-toast size="sm" position="left" alignment="start">left start</nve-toast>
<nve-toast size="sm" position="left">left center</nve-toast>
<nve-toast size="sm" position="left" alignment="end">left end</nve-toast>
`;
this._shadow.appendChild(template.content);
}
},
);
</script>
Edit Example
Toast functionality within shadow DOM for Web Component architectures. Proper toast positioning and behavior in encapsulated component environments, essential for component library implementations.
<nve-toast style="--background: red" anchor="body" position="center" alignment="center">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: blue" anchor="body" position="top" alignment="start">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: yellow" anchor="body" position="top">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: green" anchor="body" position="top" alignment="end">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: purple" anchor="body" position="bottom" alignment="start">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: orange" anchor="body" position="bottom">•︎︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: pink" anchor="body" position="bottom" alignment="end">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: brown; margin-right: -250px" anchor="body" position="left" alignment="start"
>•︎•︎•︎•︎•︎•︎</nve-toast
>
<nve-toast style="--background: gray" anchor="body" position="left">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: black; margin-right: -250px" anchor="body" position="left" alignment="end"
>•︎•︎•︎•︎•︎•︎</nve-toast
>
<nve-toast style="--background: red; margin-left: -250px" anchor="body" position="right" alignment="start"
>•︎•︎•︎•︎•︎•︎</nve-toast
>
<nve-toast style="--background: blue" anchor="body" position="right">•︎•︎•︎•︎•︎•︎</nve-toast>
<nve-toast style="--background: yellow; margin-left: -250px" anchor="body" position="right" alignment="end"
>•︎•︎•︎•︎•︎•︎</nve-toast
>
Edit Example
Body anchor positioning for toast.