Alert

v1.0.0·Added in 1.0.0

An inline message about a page or a section, from a failed payment to a maintenance banner, in three variants and six tones.

The alert sits in the page and never blocks it: server-rendered alerts show up as they are, and one that appears later (after a failed submit) fades in without pushing the page around. Its actions are real buttons that match the tone, and on a solid fill they flip to the fill's text color. With dismissible on, the close button (or Tab to it, then Enter or Space) fades the alert out while its space collapses and the content below slides up; open it again and it springs back in. With reduced motion it only fades. Closing it with focus inside moves focus to the next control instead of dropping it on the page (after a tap a text field is skipped, so the phone keyboard never pops up). Errors and warnings are announced by screen readers right away, other tones politely. On a phone two or more actions stretch into a full-width button bar under the text, and the close button keeps a 44px hit area. As a banner it spans the page: one line with the actions at the end once it is wide enough, stacked on a phone or in a narrow panel.