Alerts

CSS file

Alerts keep users informed of important and sometimes time-sensitive changes.

<div class="sba-c-alert">
  <div class="sba-c-alert__icon">
    <svg aria-hidden="true" class="sba-c-icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#info-circle"></use>
    </svg>
  </div>
  <div class="sba-c-alert__body">
    <h3 class="sba-c-alert__heading">Status heading</h3>
    <p class="sba-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Modifier: sba-c-alert--error

<div class="sba-c-alert sba-c-alert--error">
  <div class="sba-c-alert__icon">
    <svg aria-hidden="true" class="sba-c-icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#exclamation-circle"></use>
    </svg>
  </div>
  <div class="sba-c-alert__body">
    <h3 class="sba-c-alert__heading">Status heading</h3>
    <p class="sba-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Modifier: sba-c-alert--warn

<div class="sba-c-alert sba-c-alert--warn">
  <div class="sba-c-alert__icon">
    <svg aria-hidden="true" class="sba-c-icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#exclamation-triangle"></use>
    </svg>
  </div>
  <div class="sba-c-alert__body">
    <h3 class="sba-c-alert__heading">Status heading</h3>
    <p class="sba-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Modifier: sba-c-alert--success

<div class="sba-c-alert sba-c-alert--success">
  <div class="sba-c-alert__icon">
    <svg aria-hidden="true" class="sba-c-icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#check-circle"></use>
    </svg>
  </div>
  <div class="sba-c-alert__body">
    <h3 class="sba-c-alert__heading">Status heading</h3>
    <p class="sba-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Alert messages without icons

You can omit the icon by leaving out the sba-c-alert__icon.

<div class="sba-c-alert">
  <div class="sba-c-alert__body">
    <h3 class="sba-c-alert__heading">Status heading</h3>
    <p class="sba-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Alerts with actions

Use a single text link as an action for an alert to dismiss it.

Additional examples

Alerts support various types and lengths of content, including lists and links. You can use the measure utility to maintain a legible line length.

Guidance

When to use

• As a validation message that alerts someone that they just did something that needs to be corrected or as confirmation that a task was completed successfully.
• As a callout or notification for important or timely information. This includes errors, warnings, and general information.

When to consider alternatives

• On long forms, always include in-line validation in addition to any error messages that appear at the top of the form. When possible, simplify forms by rewriting and where possible, splitting long forms across multiple pages
• If an action will result in destroying a user’s work (for example, deleting an application) use a more intrusive pattern, such as a confirmation modal dialogue, to allow the user to confirm that this is what they want.

Other guidance

• Don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored.
• Write the message in concise, human readable language; avoid jargon and computer code.
• Don’t include notifications that aren’t related to the user’s current goal.
• When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible.

When the alert is for an error:

• Be polite in error messages — don’t place blame on the user.
• Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message.
• If the error relates to specific text fields, give these fields an error state as well.

Accessibility

• Use the ARIA role="alert" to inform assistive technologies of a time-sensitive and important message that is not interactive. If the message is interactive, use the role="alertdialog" instead.
• Consider putting the alert inside a div with aria-live="polite" and aria-relevant="additions removals". These ARIA attributes ensure screen readers will announce alerts that have been added or updated dynamically.
• Do not visually hide alert messages on the page and then make them visible when they are needed. Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.
• Alerts should give users adequate time to review and comprehend the provided information. Avoid hiding alerts using a timer.
• Include a mechanism like a button to dismiss alerts where appropriate.