Skip links and keyboard navigation

SWE components

Alert

Overview

Alerts are used to notify users of important time-sensitive information or changes, in a way that attracts the user's attention, and should be used sparingly.

This component is assigned role="alert" to signify information requiring the user's immediate attention. For people using assistive technologies, this role will listen for such an event and notify the user accordingly:

  • Screen readers may immediately announce or display the alert message.
  • Screen magnifiers may visually indicate that an alert occurred and what the alert text was.

Information

View example in Storybook

Code

<!-- Large alert -->
<div class="alert" role="alert">
    <h2><span class="fa fa-info-circle"></span> Find out more.</h2>
    <div>
        <p>Read about our <a href="#">complaints process</a> for information on how we handle complaints.</p>
    </div>
</div>

<!-- Small alert -->
<div class="alert" role="alert">
    <div>
        <p><span class="fa fa-info-circle"></span> <strong>Find out more</strong> Read about our <a href="#">complaints process</a> for information on how we handle complaints.</p>
    </div>
</div>

Success

The success alert is used for notifying the user that a task is fully completed.

View example in Storybook

Code

<!-- Large alert -->
<div class="alert" role="alert">
    <h2><span class="fa fa-check"></span> Your application was successfully submitted</h2>
    <div>
        <p>Your reference number is MQ-9S72K-XTBC9. A confirmation has been emailed to you.</p>
        <p><a href="#">Download a copy</a> of your completed application form (PDF, 48.3KB).</p>
    </div>
</div>

<!-- Small alert -->
<div class="alert" role="alert">
    <div>
        <p><span class="fa fa-thumbs-up"></span> <strong>Thank you.</strong> Your feedback is important to us and will be used to improve the page.</p>
    </div>
</div>

Warning

Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem or bad experience.

View  example in Storybook

Code

<!-- Large alert -->
<div class="alert" role="alert">
    <h2><span class="fa fa-exclamation-circle"></span> Registration of interest has closed</h2>
    <div>
        <p>Registration of interest for the <a href="#">Resilient Homes Fund</a> closed on 30 July 2023.</p>
    </div>
</div>

<!-- Small alert -->
<div class="alert" role="alert">
    <div>
        <p><span class="fa fa-exclamation-circle"></span> <strong>Registration of interest has closed.</strong> Registration of interest for the <a href="#">Resilient Homes Fund</a> closed on 30 July 2023.</p>
    </div>
</div>

Critical

The critical page alert should be used with form validation errors or other errors which will block the user from completing their task.

View example in Storybook

Code

<!-- Large alert -->
<div class="alert alert-danger" role="alert">
    <h2><span class="fa fa-times-circle"></span> It looks like there was a problem</h2>
    <div>
        <p>Please try again soon or <a href="#">contact us</a>for further assistance.</p>
    </div>
</div>

<!-- Small alert -->
<div class="alert alert-danger" role="alert">
    <div>
        <p><span class="fa fa-times-circle"></span> <strong>It looks like there was a problem.</strong> Please try again soon or <a href="#">contact us</a>for further assistance.</p>
    </div>
</div>

Additional usage guidance

  • If you need to emphasise content that doesn't require the user's immediate attention, you should consider using the callout component. If this component is used incorrectly (e.g. to display content that doesn't require the user's immediate attention), it may pose an accessibility issue.
  • Inline icons are recommended to help create visual consistency and familiarity, and to provide accessibility for those who may not differentiate between or perceive colours. Icons and can be selected from the Font Awesome v4.7 icon set.
Last updated:
28 June 2024