Toast
Transient notifications that slide in from the screen edge. Uses
@starting-style for the enter animation. The toast stack is
a fixed-position container at the bottom corner. z-index
(--pl-z-toast: 1100) sits above dialogs and popovers.
In production, JS adds/removes toasts with a timer. This preview demonstrates the visual states statically.
Static demo
Toasts below are shown in their settled state. Toggle the checkbox to animate them.
Changes saved Your profile was updated successfully.
Storage almost full You have used 92% of your storage.
Connection lost Reconnecting in 5 seconds.
New update available Version 2.4 is ready to install.
Placement
Use data-placement on the fixed stack to choose a corner.
bottom-end Preview
bottom-start Preview
top-end Preview
top-start Preview