Alert

A tinted line that stays in the page, beside the thing it is about, for as long as it is true.

Try it

The three drawn shapes — a close, nothing, one action — and a fourth that is not drawn: a title over the message, with both buttons.

Choosing an alert

An alert is about a place. It sits at the top of the form, the card or the page it concerns, and it stays while what it says is true: the trial ends in three days, the calendar is disconnected, these settings are managed by someone else. What has just happened and needs no place is a toast. What is wrong with one field is the Field’s own error. What must be decided before anything else is a dialog.

It does not dismiss itself and it has no clock. onClose shows the close and tells the caller, who removes it; without it the alert stays until its cause is gone.

Anatomy

It is as wide as what holds it. A long message wraps and the alert grows downward, with the icon and the buttons kept to the first line. It asks its own container how wide it is, not the screen: under 400, the action drops below the message and the close keeps the corner.

Where it leaves the drawing

The drawing edges two of its states in the theme’s strong status borders and two in a pale stop with no token, so two alerts have an outline and two almost none. Every edge is now soft, and four tokens were added for them, named after the surfaces they edge. In dark they are a stop stronger, as every border in the theme is.

The drawn action is filled with the state’s colour. The theme has a fill for success and for danger and none for the other two, and white on the drawn info fill is about 3.4:1. So the action is an outline in the text’s own colour, which already reads on the tint, with the theme’s wash for hover. The fill returns when all four tones have one.

The close is 32 with a 20 icon, the Toast’s, where the drawn one is 24: one close button across the system. In dark the alert keeps its tint, a surface step above a card, where the Badge changes to an outline: that was chosen for a label 24 tall, and an alert is a panel whose tint is how it is found.

Accessibility

The tone is a colour and a shape, so it is also said: a screen reader hears “Warning:” before the message. An alert is not a live region unless asked. One that is in the page when it loads would otherwise be read out over the page; one that is inserted in answer to something takes announce, and then danger and warning interrupt as alert and the others wait as status. The action comes before the close in the tab order. The focus ring is the system’s, and is 3:1 or more on all four tints in both modes.

Props