Alert
Alerts provide short, timely, and relevant information for your users.
Example
Default alert
This is a primary alert—check it out!
<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
This is a primary alert with an example link. Give
it a click if you like.
This is a primary alert with an example link. Give
it a click if you like.
This is a primary alert with an example link. Give
it a click if you like.
This is a primary alert with an example link. Give
it a click if you like.
This is a primary alert with an example link. Give
it a click if you like.
<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
Hey, nice to see you
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
Oh snap! You got an error!
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
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:
- For validation errors - Alerts should not be used for validation errors, these should be displayed on the component that the user is on.
- Multiple alerts - There should not be 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.
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 22 November 2023
