alert

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.

info

Logged in as John Smith (johnsmith@acme.com). Log out

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.

info

Logged in as John Smith (johnsmith@acme.com). Log out

<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">

Variations

Warning

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

warning

Your browser is outdated. Your Salesforce experience may be degraded. More Information

<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">

Error

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

error

Your browser is currently not supported. Your Salesforce may be degraded. More Information

<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">

Offline

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

offline

You are in offline mode. More Information

<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">