Alert

A message that stays on the page. Every alert has a title, so its meaning never depends on colour.

When to use

To tell people something changed or something matters: a deadline, a payment received, a session about to end.

When not to use

For form validation, use the error summary. For a message that disappears on its own: never. Timed messages fail WCAG and get missed on slow devices.

<div class="ag-alert" role="status">
  <h3 class="ag-alert__title">Applications close on 31 October</h3>
  <p>Submit before 11:59pm <span data-docs-string="timezone">local time</span>.</p>
</div>
<div class="ag-alert ag-alert--success" role="status">
  <h3 class="ag-alert__title">Payment received</h3>
  <p>Your receipt number is <strong data-docs-string="ref">REF-2026-004512</strong>.</p>
</div>
<div class="ag-alert ag-alert--warning" role="status">
  <h3 class="ag-alert__title">Your session ends in 5 minutes</h3>
  <p>Save your progress to avoid losing it.</p>
</div>
<div class="ag-alert ag-alert--error ag-mb-0" role="alert">
  <h3 class="ag-alert__title">We could not verify your <span data-docs-string="id-short">ID number</span></h3>
  <p>
    Check the number and try again, or
    <a href="#alert-example">contact <span data-docs-string="id-authority">the registration office</span></a
    >.
  </p>
</div>

Accessibility

• Use role="alert" only for errors people must act on now. It interrupts the screen reader.
• Use role="status" for everything else. It is announced when the reader is free.
• The title is a heading at the right level for the page, usually h2 or h3.
• Links inside an alert use ink, not the primary colour, because the primary is not guaranteed on the tinted background.
• Put an alert that reports the result of an action at the top of the page the person lands on.

Pack fields

The examples read examples.timezone, examples.refPrefix, id.short, id.authority.