Example Alerts

info

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

warning

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

error

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

offline

You are in offline mode. More Information

Usage

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.

<button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close" data-dismiss="alert">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#close" />
  </svg>
  <span class="slds-assistive-text">Close</span>
</button>