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 savedYour profile was updated successfully.
Storage almost fullYou have used 92% of your storage.
Connection lostReconnecting in 5 seconds.
New update availableVersion 2.4 is ready to install.
Placement
Use data-placement on the fixed stack to choose a corner.
bottom-endPreview
bottom-startPreview
top-endPreview
top-startPreview