Alert boxes
Interrupts the user to communicate critical or important information.
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.
The info alert box title! Use this style of alert to communicate non-urgent information.
<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>
<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> Use this style of alert to communicate non-urgent information.</p>
</div>
</div>
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.
<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>
<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> 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.
<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>
<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> 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>
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.
<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>
<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> 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.
<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>
<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> 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
- is-dismissible - allows the alert to be closed
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
