Skip to content
Components

Alert & callout

An alert reports a live condition of the data; a callout is the author speaking. Data confidence is a message, not an error.

Alert, banner or toast

Alert

A condition of the DATA, right now. Lives inline, near the thing it is about.

Banner

A condition of the whole VIEW, which stays until it changes.

Toast

A confirmation of something the user asked for. Transient.

Alerts

They state what is true, what it means, and what to do — in that order.

Information: Zoning shown is the current planning scheme

A proposed amendment is on public notice until 14 September.

Caution: Data is older than we'd like

Council last published this overlay 14 months ago. Treat boundaries as indicative and confirm before you lodge.

Success: Report emailed

The tone is announced in words as well as colour — a screen-reader user gets "Error" the same way a sighted one gets red. The body stays neutral ink in every tone: tinting the prose as well as the heading makes a caution message harder to read than a plain one, which is backwards.

Callouts

Editorial asides for docs and articles. An alert reports a live condition; a callout is the author speaking — so a callout never carries actions, and it is never role=alert, because nothing has happened.

A callout's colour is generic status, never planning meaning. Caution is the only status hue it may take.

Navigate

Esc