Toaster

<esp-toaster>

A toast notification container that listens for "show-toast" events on EspBus and renders them as stacked esp-info components. Place one <esp-toaster> in your page layout (it is included automatically inside <esp-page>).

Toasts auto-dismiss after their duration (default 5 seconds). A duration of 0 creates a persistent toast that the user must dismiss manually.

import { showToast } from "@taprootio/taproot-controls";

showToast({ message: "Saved!", variant: "success" });
showToast({ message: "Connection lost", variant: "danger", duration: 0 });

Try it out — type a message and click a button to fire a toast:

Methods

<esp-toaster> has the following methods:

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

CSS Properties

<esp-toaster> has the following CSS properties:

--esp-toaster-z-index

Stack order of the toaster container. Defaults to 5000.

--esp-toaster-gap

Gap between stacked toasts. Defaults to var(--esp-size-tiny-to-small).

--esp-toaster-padding

Padding around the toaster container. Defaults to var(--esp-size-padding).

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).