Alert

Alert users to important information.

<div class="hods-alert">
  <h2 class="hods-alert__heading">New passport</h2>
  <p>
    We&#x27;ll send your new passport by secure
    delivery. The cost is included in the passport
    fee.
  </p>
</div>

<Alert heading="New passport">
  We'll send your new passport by secure delivery. The
  cost is included in the passport fee.
</Alert>

When to use this component

Use alerts to inform users that something important has happened, notify them of a success or failure or to take action. Only use this component when you have identified that users need to be made aware of certain content.

How it works

Standard alert

<div class="hods-alert">
  <h2 class="hods-alert__heading">New passport</h2>
  <p>
    We&#x27;ll send your new passport by secure
    delivery. The cost is included in the passport
    fee.
  </p>
</div>

<Alert heading="New passport">
  We'll send your new passport by secure delivery. The
  cost is included in the passport fee.
</Alert>

Alert notifying of a successful outcome

Use the green version of the alert to confirm that something they’re expecting to happen has happened.

<div class="hods-alert hods-alert--success">
  <h2 class="hods-alert__heading">
    Payment successful
  </h2>
  <p>
    We&#x27;ve sent details to
    test-email@test-corp.co.uk
    <br />
    <a href="#">Download confirmation</a>
  </p>
</div>

<Alert
  heading="Payment successful"
  classModifiers="success"
>
  We've sent details to test-email@test-corp.co.uk{" "}
  <br />
  <a href="#">Download confirmation</a>
</Alert>

Alert indicating an error

Use the red version of the alert to confirm that something has gone wrong.

<div class="hods-alert hods-alert--error">
  <h2 class="hods-alert__heading">
    Payment unsuccessful
  </h2>
  <p>
    Please try again or contact our
    <a href="#">support team</a>
    for assistance.
  </p>
</div>

<Alert
  heading="Payment unsuccessful"
  classModifiers="error"
>
  Please try again or contact our{" "}
  <a href="#">support team</a> for assistance.
</Alert>

Alert placement

Although alerts are usually put at the top of the screen, this is not always the case. Where you put the alert should suit the needs of your service.

Multiple alerts

Avoid using lots of alerts next to each other and put all the information in one alert where possible.

Some journeys may need multiple alerts on a single screen. If, for example, the journey has one successful and one error alert, they should be in priority order.

Writing for this component

Try to keep alerts to one or two lines of text and not necessarily in full sentences, given the lack of space. If the text does not end in a link and is a full sentence, include a full stop.

Tell users what to do next. If you can, give them a link that will take them directly to further support or the next action.

Only use bold for headings and links.

If the alert is about people, make sure your content is dynamic and personalised. Use ‘person’ when it’s about one person and ‘people’ for more than one and include names if you can.

Accessibility

All users benefit from clear, visible notification messages which are presented in a consistent, predictable way. See the notifications guidance for more information.

Make the link text bold so that it contrasts enough with the background colours.

In the Atlas caseworking system, it was found this alert should sit under the H1 heading level.

Research

The alert is used by:

• Passport renewals
• Atlas caseworking system

Passport renewals found this component worked better than the confirmation pattern for a payment success page. They observed users engaged with the next steps on the page, rather than thinking they were finished.

Help improve this component

This component needs improving.

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.