Alert

Alerts provide short, timely, and relevant information for your users.

Example

Default alert

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Additional content

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Dismissable

HTML React Web Component
<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>
View on React storybook View on Web component storybook

Anatomy

Alert Anatomy
  1. Icon (situational): Serves to give more context to the alert.
  2. Text: Serves to tell users what the alert is about.
  3. Close icon (situational): Can be used as a close button to allow users to dismiss the alert.
  4. Container: Serves to house the content of the alert. Width and height will vary depending on the amount of content within.

Spacing

Alert 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:

  1. 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:

  1. For validation errors - Alerts should not be used for validation errors, these should be displayed on the component that the user is on.
  2. 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 side

Last updated 22 November 2023
Home


Latest version 2.2.0