Toast
A transient notice in a fixed corner. Enters with @starting-style; leaves with data-leaving.
Examples
Trigger
data-toast is the declarative form of toast() from aequitas.js.Markup
Region
The .toasts region stacks toasts in a fixed corner, the newest in front; hover or focus it to fan them out. Shown in place here; on a page it is fixed to the viewport.Anatomy
.toasts | The fixed stack, bottom end by default. toast() uses the first one that is fixed, and creates one at the end of <body> when there is none; a region shown in place, like the demo here, is left alone. |
> .toast | One frosted notice with role="status" (role="alert" for a failure). Slides and fades in on insertion. |
div | The message, with an optional <strong> title in the tone colour. |
API
| Attribute | Values | Description |
|---|---|---|
data-toast | <text> | On any element: a click shows a toast with this message. |
data-toast-title | <text> | With data-toast: a bold title before the message. |
data-toast-tone | accentsuccesswarningdangerinfo | With data-toast: the toast's tone. |
data-toneon .toast | accentsuccesswarningdangerinfo | Draws a small square in the tone before the message and colours the title. No square without it. |
data-positionon .toasts | top-endtop-centerbottom-centerbottom-start | Which corner or edge the stack sits in. Default bottom end. |
data-stackedon .toasts | boolean | Set by aequitas.js: the toasts stack, the newest in front, and hover or focus fans them out. Without it the region is a plain list. |
data-leavingon .toast | swipe | Exit state: fades and sinks back towards the edge it came from; data-leaving="swipe" carries it on sideways instead. aequitas.js sets it, then removes the element once its transitions end. |
data-behindon .toast | boolean | |
data-swipingon .toast | boolean |
Behaviour
aequitas.toast(message, { title, tone, duration }) appends an empty .toast to the .toasts region on the page, which init() creates up front as a polite live region (aria-live="polite"); a danger toast also takes role="alert". The message is written in a frame later. After duration (default 4000 ms, Infinity for danger; Infinity keeps any toast) it sets data-leaving and removes it; toasts stack, the newest in front with two older ones peeking out behind it; hovering the stack or moving focus into it fans it out into a list, and every countdown waits until both leave, then starts again from the top. A click on [data-toast] calls it with the element's data-toast, data-toast-title and data-toast-tone; every toast it makes carries a Dismiss button, a stacked toast can be swiped away sideways towards its edge of the screen (a flick is enough; the other way it resists, and one already leaving can be caught), and a [data-dismiss] button inside any toast sends it out the same way a timed one leaves, moving focus to the next toast's button, or back to where it was before the stack took it, without scrolling the page. Without aequitas.js, toasts are markup you add and remove yourself.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
toast()writes into a region that is already a polite live region, and gives a danger toastrole="alert", which interrupts. Hand-written toasts needrole="status"orrole="alert"themselves, or anaria-liveregion around them.toast()inserts the live region empty and fills it on the next frame, since screen readers announce changes to a region, not a region that arrives already filled. Do the same when you add toasts yourself.- A toast leaves after four seconds unless the pointer or focus is on the stack; a danger toast stays until dismissed, and
duration: Infinitykeeps any other. Never put the only copy of an error, or an action the user must take, in a timed one: show it inline as well.