Alert boxes

Examples

Alerts provide contextual feedback and information to users. They come in several types and have different uses:

information - for important information that you do not want the user to miss
warning - provides a caution or warning to users, indicating the need for attention when performing an action due to potential issues
success - informs a user about a successful action or completed task
danger - commonly used to signify danger or critical situations, informing the user about errors or issues

Usage

When using alert boxes, it's crucial to consider the context, user needs, and the potential impact on the overall user experience. Properly designed alert boxes can provide value by communicating important information, but their misuse can have the opposite effect.

Do:

use alerts sparingly, overuse will lead to users to ignore them
use alerts to provide feedback on user actions, such as form submissions or interactions
make sure the alerts used for feedback are timely and relevant
use the appropriate icon and style for the context of the message
use clear and concise messages that convey the necessary information
use meaningful link text

Avoid:

using alerts that are on screen for extended periods of time, these should only be for emergency notifications or critical system messages
putting additional components in alert boxes
putting too much content inside alert accordions
using alert boxes for non-critical information

The info alert box title! Use this style of alert to communicate non-urgent information.

The warning alert box title! Use this style of alert to communicate that something important has happened or is about to happen. This also warns the user that they might have to take some action. For example, that they are required to fill in a particular form.

The success alert box title! Use this style of alert to communicate that a positive action has taken place. For example, a task that a user performed has been successful.

The danger alert box title! Use this style of alert to warn the user that something immediate, negative (and possibly serious) might happen. For example, they are about to delete an important form.

The info alert box title! Use this style of alert to communicate non-urgent information.

Copy


    <turas-alert-box alert-box-title="The info alert box title!" alert-box-message="Use this style of alert to communicate non-urgent information.">

    </turas-alert-box>

Copy


    <div class="alert-info alert  " role="alert">
        <div class="alert-icon">
            <span class="fa-info-circle fa" aria-hidden="true"></span>
        </div> 
        <div class="alert-content"> 
            <p class="mb-0"><strong>The info alert box title!</strong>&#32;Use this style of alert to communicate non-urgent information.</p>
            

    
        </div>
        </div>

Copy


    <turas-alert-box alert-box-style="Warning" alert-box-title="The warning alert box title!" alert-box-message="Use this style of alert to communicate that something important has happened or is about to happen. This also warns the user that they might have to take some action. For example, that they are required to fill in a particular form. ">

    </turas-alert-box>

Copy


    <div class="alert alert-warning  " role="alert">
        <div class="alert-icon">
            <span class="fa-exclamation-triangle fa" aria-hidden="true"></span>
        </div> 
        <div class="alert-content"> 
            <p class="mb-0"><strong>The warning alert box title!</strong>&#32;Use this style of alert to communicate that something important has happened or is about to happen. This also warns the user that they might have to take some action. For example, that they are required to fill in a particular form. </p>
            

    
        </div>
        </div>

The success alert box title! Use this style of alert to communicate that a positive action has taken place. For example, a task that a user performed has been successful.

Copy


    <turas-alert-box alert-box-style="Success" alert-box-title="The success alert box title!" alert-box-message="Use this style of alert to communicate that a positive action has taken place. For example, a task that a user performed has been successful.">

    </turas-alert-box>

Copy


    <div class="alert alert-success  " role="alert">
        <div class="alert-icon">
            <span class="fa-check fa" aria-hidden="true"></span>
        </div> 
        <div class="alert-content"> 
            <p class="mb-0"><strong>The success alert box title!</strong>&#32;Use this style of alert to communicate that a positive action has taken place. For example, a task that a user performed has been successful.</p>
            

    
        </div>
        </div>

Copy


    <turas-alert-box alert-box-style="Danger" alert-box-title="The danger alert box title!" alert-box-message="Use this style of alert to warn the user that something immediate, negative (and possibly serious) might happen. For example, they are about to delete an important form. ">

    </turas-alert-box>

Copy


    <div class="alert alert-danger  " role="alert">
        <div class="alert-icon">
            <span class="fa-bolt fa" aria-hidden="true"></span>
        </div> 
        <div class="alert-content"> 
            <p class="mb-0"><strong>The danger alert box title!</strong>&#32;Use this style of alert to warn the user that something immediate, negative (and possibly serious) might happen. For example, they are about to delete an important form. </p>
            

    
        </div>
        </div>

The info alert box title! Use this style of alert to communicate non-urgent information.

Copy


    <turas-alert-box alert-box-title="The info alert box title!" is-dismissible alert-box-message="Use this style of alert to communicate non-urgent information.">

    </turas-alert-box>

Copy


    <div class="alert-info alert alert-dismissible fade show " role="alert">
        <div class="alert-icon">
            <span class="fa-info-circle fa" aria-hidden="true"></span>
        </div> 
        <div class="alert-content"> 
            <p class="mb-0"><strong>The info alert box title!</strong>&#32;Use this style of alert to communicate non-urgent information.</p>
            

    
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>

Optional parameters

alert-box-title - the alert box title
alert-box-message - the alert box message
alert-box-style - change or specify the default Info style. For example, Info, Warning, Success, Danger
additional-classes - additional CSS classes
id - the HTML ID attribute

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the alert is in an expected tab order, does not trap focus and that all interactive elements within the alert are accessible with a keyboard (for example any close buttons)
make sure focus is visible
test alerts with screen readers to ensure they are announced as expected

Developer considerations

if an alert is important and the user should be notified straight away, then the ARIA role = "alert" must be used. This will then announce the alert to screen reader first over all content on the page
if an alert box is providing non urgent information that the user doesn't need to know straight away then the ARIA role = "Status" must be used. The contents of this alert box will just be read out in a natural order on the page
avoid using timed alerts that disappear automatically as this may not give all users enough time to read the content
if you must use a timed alert provide a way to pause or dismiss it

Accordions

Examples

Usage

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?