Toast

Basics

A .canon-toast: a title, an optional description and actions, a close button. data-intent picks its icon, in the same words as a Button's: info, success, warning, danger; none for plain news. Here as they look (in the page, not shown as toasts).

Emphasis

data-emphasis="high": solid, for the rare toast that must be noticed (a failure that lost work, a sync that stopped). In the same words as a Button's. Without an intent it is the page's colors inverted. Most toasts stay at the default.

Showing one

A Button with command="--canon-toast" and commandfor a <template> holding the toast shows a copy in the toaster, at the window's bottom-end corner. It goes after 5 seconds; the time stops while the pointer or focus is on it. The last one stays until you close it (data-duration="none").

A timer

data-timer (or timer: true in the event): a line along the bottom runs out with the toast's time, so people can see it's going. It stops while the pointer or focus is on the toaster (the toast is data-paused), as the time does: hover one to try.

From app code

Most toasts follow something the app did, after the server answered. Dispatch canon-toast on the document with what to show: title, description, intent, action ({ label, onClick }), duration. The toast made comes back on detail.toast, which fires canon-dismiss when it goes (detail.reason). A toast with an action stays 10 seconds.

Delete it, then undo, or let the toast go.

Edge cases

Right to left, the toaster sits at the bottom-left and the icon comes first on the right. Long text wraps. At most three toasts at once: a fourth sends the oldest away.