Jump to Navigation
Skip to Content
Component Blueprints

Alert

  • HTML/CSS:Dev Ready
  • Layout:Responsive

Sections

Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.

About Alert#

Accessibility#

Role#

Alert notifications should contain role="alert" on the container to signal to assistive technology that they require the user’s immediate attention.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info" role="alert">...</div>

Assistive Text#

Use a span with the class slds-assistive-text to let the user know what type of notification it is.

<span class="slds-assistive-text">Info</span>

Base#

Use the info alert when notifying the user of neutral information about the system.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info" role="alert">
  <span class="slds-assistive-text">info</span>
  <span class="slds-icon_container slds-icon-utility-user slds-m-right_x-small" title="Description of icon when needed">
    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">

Variations#

Warning#

Use the warning variant to warn the user about important system information that deserves caution.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
  <span class="slds-assistive-text">warning</span>
  <span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">

Error#

Use the error variant when you need to alert the user about an error in the system that needs immediate attention.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
  <span class="slds-assistive-text">error</span>
  <span class="slds-icon_container slds-icon-utility-error slds-m-right_x-small" title="Description of icon when needed">
    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">

Offline#

Use the offline alert to let the user know that they are not connected to the internet.

<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_offline" role="alert">
  <span class="slds-assistive-text">offline</span>
  <span class="slds-icon_container slds-icon-utility-offline slds-m-right_x-small" title="Description of icon when needed">
    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">

Overview of CSS Classes#

Selector.slds-notify_alert
Summary

Initializes alert notification

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-notify__close
Summary

Alert close button

Restrict.slds-notify_alert div

Alert Release Notes

2.8.0

Fixed

  • Added slds-button_icon-small to the close button on alerts to fix the sizing of the click target.
  • Improved the contrast for focus and hover states on links and buttons in alerts

2.7.0

Changed

  • Changed HTML so the button icon can be slotted into the slds-notify__close element

Fixed

  • Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden