Skip to content
UX Atlas
Plate CMP·015 · ComponentGrid F1 · Rev. 2026-08-14

Alert and Inline Message

A persistent message tied to a context, which is where anything requiring action belongs.

ComponentCraft conventionFoundational

Definition

An alert communicates a status or condition and stays until it is resolved or dismissed. Its persistence is what makes it suitable for information the user must act on.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Placement by scope
  3. 3Requirements
  4. 4Placement and announcement
  5. 5In practice
  6. 6Commonly confused with
  7. 7Local chart
  8. 8Continue from here

Reach for this when

  • Communicating a condition the user needs to resolve.
  • Persistent status information.

Common mistakes

  • Colour-only severity.
  • Alerts far from the thing they describe.
  • Dismissible alerts for unresolved problems.
  • Alert fatigue from routine messages.

Placement by scope

ScopePlacement
A single fieldDirectly below the field, associated with aria-describedby.
A form or sectionAt the top of that section, with links to the affected fields.
The whole pageBelow the header, above the content.
The whole accountA persistent bar, used very sparingly.

Requirements

  • Icon plus colour plus text. Colour alone fails WCAG 1.4.1.
  • State the problem and the next action, with a control where one applies.
  • role alert for messages requiring immediate attention; role status for routine updates.
  • Do not allow dismissal of an alert describing an unresolved blocking condition.
  • Keep the tone factual. The user is not at fault.

Placement and announcement

Do

  • Put it next to what it describes: the field, the section, or the top of the page for page-level issues.
  • Use role status for information and role alert only for something that genuinely interrupts.
  • Keep it until the condition is resolved.
  • Say what to do next, not only what happened.

Do not

  • Stack four alerts at the top of a page and expect any of them to be read.
  • Use an alert for something that is neither urgent nor actionable.
  • Rely on colour alone to distinguish warning from error.
  • Make an important alert dismissible with no way to bring it back.

In practice

  1. i.

    The banner that became furniture

    Permanent alerts

    A yellow bar that had been on the dashboard for eight months stopped being read within a fortnight. An alert that never resolves is a layout element, and it should be designed as one.

  2. ii.

    Page-level error, field-level cause

    Placement

    Please correct the errors below at the top of a long form leaves the reader hunting. The summary is useful when each item links to its field, and useless when it is the only thing shown.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Toast

Component

A brief, self-dismissing confirmation that an action completed.

Key difference

An alert stays in the layout beside the thing it is about. A toast floats, times out, and takes its message with it, so nothing a reader must act on belongs in one.

Use Alert and Inline Message when

  • The reader has to do something about it.
  • The message explains a state that is still true.
  • Missing it would leave the reader stuck or wrong.

Use Toast when

  • You are confirming something the reader just did.
  • The message is safe to miss entirely.
  • Any recovery it offers, such as Undo, also exists elsewhere.

Learn about Toast

Local chart

CMP·015 · Region III · Grid F1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Help Users Recognise, Diagnose and Recover From ErrorsHEUR·009 · PRINCIPLES BEHIND THISSemantic ColorFND·023 · PRINCIPLES BEHIND THISStatus Messages and Live RegionsA11Y·009 · DEPENDS ONUse of ColorA11Y·010 · DEPENDS ONNotificationsPAT·015 · OFTEN USED WITHToastCMP·014 · COMMONLY CONFUSED WITHError MessagesWRT·002 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutAn AI ProductAuthentication

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Related concept

Connected closely enough to change how you apply this.