Alert

Alert

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

Base

Preview

No content has been added for this component.

No content has been added for this component.

<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">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#user"></use>
    </svg>
  </span>
  <h2>Logged in as John Smith (johnsmith@acme.com).
    <a href="javascript:void(0);">Log out</a>
  </h2>
  <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Close</span>
  </button>
</div>

About Alert

Accessibility

Notifications should contain role="alert" on the container to signal to assistive technology that they require the user’s immediate attention. Use a span with .slds-assistive-text to let the user know what type of notification it is.


Overview of CSS Classes

Selector.slds-notify_alert
Summary

Initializes alert notification

Restrictdiv
VariantTrue