Scheduled maintenance tonight, 23:00–23:30 UTC.

← Overview

toast

Transient messages in a stack over the page — announced through a live region the messages themselves are not part of.

The four kinds of message

data-toast-variant: each picks an accent colour and an icon shape — a colour on its own would not be a distinction. The kind is also the first word of the announcement, so a screen-reader user hears Error: … where a sighted one sees the red rule. The error goes to the assertive region, the other three to the polite one.

The timer, and how many fit

Messages leave by themselves after 6 s — but not while you are near them: put the pointer over the stack, or tab into it, and the countdown holds where it is. The first control below sets data-toast-duration="0", which switches the timer off for that message. Press any of them five times in a row and only three are ever on screen (data-toast-max): past that the oldest leaves, so a loop reporting twenty failures cannot bury the page.

A second stack, somewhere else

data-toast-trigger="toast-notices": the stack at the top of the viewport is the one holding the maintenance notice — a message this page rendered into the markup, so it was on screen before any script ran. It carries the m-toast--blockStart and m-toast--inlineCenter modifiers, which are nothing but presets of the placement properties; note that a message travels out of the edge its stack is pinned to, downwards here instead of upwards. The usual reason for a second stack is less decorative: a modal <dialog> is painted in the top layer, above every fixed element, so a stack that has to show over one has to live inside it.

A message that holds a control

data-toast-template: the content comes from a <template> on the page, which is how a message gets a link or an "Undo" button without this module ever parsing a string as markup — a message is data, and data parsed as markup is an injection. Such a message is never given a timer, whatever the attributes say: the reader has to be able to reach that control, and a countdown running against them while they do is the one thing a toast must not be (WCAG 2.2.1). Tab into it, then press Escape to dismiss it — the focus comes back to the control you started from.