alder-ui demos

al-toast

A transient message in a corner region. The script shows the region, sets role="status" and closes the toast after timeout.

Without JavaScript

The toast region is a hidden popover until the script shows it, so the server also renders the message in the page as an al-alert:

Post saved.

Enhanced

With the script, each region is shown when its toast connects. These are sticky (timeout="0") so you can see all four variants at all four corners; the default timeout is 5000 ms and the toast closes itself. Text or a strong before the first block (div, p, list) is the title and the blocks are the description; a one-line message, even with inline elements, is all title. A toast with no variant has no icon.

Saved post.mdInfo toast
Bottom-right, the default corner.
Success toast
Top-left.
Warning toast
Top-right.
Destructive toast (bottom-left).

Timeout and motion

A toast slides in from its region's edge and, when it closes, slides back out before it is removed (not with reduced motion). This one closes after 3000 ms.