Alert
Alerts provide short, timely, and relevant information for your users.
Example
Default alert
<div role="alert" class="sgds alert alert-primary fade d-flex align-items-center show">
<div>
<i class="bi bi-exclamation-circle me-2"></i>This is a primary alert—check it out!
</div>
</div>With link
<div role="alert" class="fade d-flex align-items-center alert alert-primary show sgds">
<div>
<i class="bi bi-exclamation-circle me-2"></i>
This is a primary alert with <a class="alert-link" href="#" role="button" tabindex="0">an example link</a>. Give
it a click if you like.
</div>
</div>
<div role="alert" class="fade d-flex align-items-center alert alert-secondary show sgds">
<div>
<i class="bi bi-exclamation-circle me-2"></i>
This is a primary alert with <a class="alert-link" href="#" role="button" tabindex="0">an example link</a>. Give
it a click if you like.
</div>
</div>
<div role="alert" class="fade d-flex align-items-center alert alert-success show sgds">
<div>
<i class="bi bi-exclamation-circle me-2"></i>
This is a primary alert with <a class="alert-link" href="#" role="button" tabindex="0">an example link</a>. Give
it a click if you like.
</div>
</div>
<div role="alert" class="fade d-flex align-items-center alert alert-danger show sgds">
<div>
<i class="bi bi-exclamation-circle me-2"></i>
This is a primary alert with <a class="alert-link" href="#" role="button" tabindex="0">an example link</a>. Give
it a click if you like.
</div>
</div>
<div role="alert" class="fade d-flex align-items-center alert alert-warning show sgds">
<div>
<i class="bi bi-exclamation-circle me-2"></i>
This is a primary alert with <a class="alert-link" href="#" role="button" tabindex="0">an example link</a>. Give
it a click if you like.
</div>
</div>Additional content
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div role="alert" class="fade d-flex align-items-center alert alert-success show sgds">
<i class="bi bi-exclamation-circle me-4"></i>
<div>
<div class="alert-heading h4">Hey, nice to see you</div>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer
so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>Dismissable
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
<div role="alert" class="fade d-flex align-items-center alert alert-primary alert-dismissible show sgds">
<button type="button" class="btn-close btn-sm" aria-label="Close alert"></button>
<i class="bi bi-exclamation-circle me-4"></i>
<div>
<div class="alert-heading h4">Oh snap! You got an error!</div>
<p class="mb-0">Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>Anatomy
- Icon (situational): Serves to give more context to the alert.
- Text: Serves to tell users what the alert is about.
- Close icon (situational): Can be used as a close button to allow users to dismiss the alert.
- Container: Serves to house the content of the alert. Width and height will vary depending on the amount of content within.
Spacing
Within the alert
Ensure that there is a min of 16px vertical spacing and 24px horizontal spacing within
the alert and 16px spacing between icon and text. Base height 64px.
Usage guidelines
Best practices:
- Alert banner should come back into view at the next possible occasion if the user dismisses it without resolving it.
- Be clear and concise. If possible, include an in-line action for a user to take so that they can address the issue explained in the message.
Alerts should be used when:
- You need system status messaging - The alert may be in the form of a notification that keeps users informed of the status of a system. This may or may not require the user to take action and/or respond. Some examples of this can be in the form of errors, warnings or generic updates for the users.
Alerts should not be used when:
- You need to display validation errors, these should be displayed on the component that the user is on.
- There are multiple alerts on a single page. E.g A notification alert and a error/warning alert. Use the one that is most important to the user.
Usability guidelines
Do not use multiple notifications on a page
This may overwhelm or annoy users and may result in them ignoring the notification altogether.
Dismissable alerts
Avoid triggering interaction with a badge as they may be confused as small buttons.
Proper context
Do not use alerts that are not related to a user's goal.
Behaviour
Users should be able to close a dismissible notification by clicking the close x. Alerts can include high and low contrast to differentiate critical messaging. low contrast will be less visually disruptive for users.
Accessibility guidelines
Aria attributes
-
The widget has a
role="alert".
Keyboard accessibility
- The only interactive elements are HTML button and hyperlink elements, and all the keyboard functionality is provided by browsers.
Focus indicator
- Ensure that focus is moved to the alert when it appears to ensure screen reader users are aware of it.
- Ensure interactive elements within the alert (like a close button) are accessible via the keyboard.
Alert design tokens
$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-bg-scale: -80% !default;
$alert-border-scale: -70% !default;
$alert-color-scale: 40% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either sideLast updated 02 October 2024
