Components

Notifications

Page level toasts are universally visible and are fixed to the top of the page even as the user scrolls. This ensures that the message is always delivered to the user.

AlertAlert › DefaultAlert › SuccessAlert › ErrorAlert › OfflineAlertdev ready

Preview

Code

<div class="slds-notify_container">
  <div class="slds-notify slds-notify--alert slds-theme--alert-texture" role="alert">
    <button class="slds-button 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>
    <span class="slds-assistive-text">Info</span>
    <h2>Base System Alert</h2>
  </div>
</div>

ToastToast › DefaultToast › SuccessToast › WarningToast › ErrorToast › Error With DetailsToast › Small ColumnToastdev ready

Preview

Code

<div class="slds-notify_container">
  <div class="slds-notify slds-notify--toast" role="alert">
    <span class="slds-assistive-text">Info</span>
    <button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close">
      <svg class="slds-button__icon slds-button__icon--large" 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 class="slds-notify__content">
      <h2 class="slds-text-heading--small">Base Toast</h2>
    </div>
  </div>
</div>

PromptPromptdev ready

Preview

Code

<div role="alertdialog" tabindex="-1" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal--prompt">
  <div class="slds-modal__container">
    <div class="slds-modal__header slds-theme--error slds-theme--alert-texture">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
        <svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
      <h2 class="slds-text-heading--medium" id="prompt-heading-id">Service Unavailable</h2>
    </div>
    <div class="slds-modal__content slds-p-around--medium">
      <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore
        quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
    </div>
    <div class="slds-modal__footer slds-theme--default">
      <button class="slds-button slds-button--neutral">Okay</button>
    </div>
  </div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>

A prompt uses the base modal component and then adds the class .slds-modal--prompt to the overall .slds-modal. The utilities > themes > colors class is placed on the .slds-modal__head to create the color of the header. In the example, we illustrate using .slds-theme--error. The class .slds-theme--alert-texture should be applied to create the striped gradient. The .slds-modal__footer receives the class .slds-theme--default.

Accessibility

Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different role of alertdialog to indicate their severity. Like modals they should be labelled by their headings, but additonally they should be desscribed by the message details of the prompt.

The element containing the prompt message should be the target focus of the browser when it is displayed, which is why we add tab-index="0" to slds-modal__container.

There is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal.

Expected markup (same as Modals, but with the following differences):

  • Modal has role="alertdialog"
  • Modal has an aria-describedby attribute that matches the id of the modal message container.
  • Modal message container container should have tab-index="0"

Expected keyboard interaction (sme as Modal, with the addition of):

  • Modal message container should take initial focus

Component Overview

Toasts accept two parameters: duration and dismissible. Duration controls how long the toast is visible, with a minimum time of 5 seconds. Dismissible controls whether the X is visible on the toast to let the user close the toast.

Toasts should provide a link to the relevant record in the case of creates. Or a primary action- like undo. In the case of toast for items added to a feed or related list, the link should scroll the user down the page until the item is visible.

All toasts other than success toasts should also provide an icon to distinguish the kind of message that it is. For example error toasts include the error icon.

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component. The theme modifiers are found in themes.
Class NameUsage
.slds-notify
Applied to:

<div>

Outcome:

Initializes notification

Required:

Required

Comments:

Applys to alerts and toasts

.slds-notify_container
Applied to:

<div>

Outcome:

Initializes notification container

Required:

Required

Comments:

Wraps around notification for positioning

.slds-notify--toast
Applied to:

.slds-notify

Outcome:

Initializes toast notification

Required:

Required

Comments:

Required for toast notifications

.slds-notify--alert
Applied to:

Outcome:

Initializes alert notification

Required:

Required

Comments:

Required for alert notifications

.slds-notify__close
Applied to:

<button>

Outcome:

Positions close icon

Required:

Required

Comments:

--

.slds-notify__content
Applied to:

<div>

Outcome:

Initializes notification content

Required:

No, optional element or modifier

Comments:

--

.slds-modal--prompt
Applied to:

.slds-modal

Outcome:

Initializes Prompt style notification

Required:

Required

Comments:

Themes can be added to the .slds-modal__header to create the alert style required

.slds-region_narrow
Applied to:

<div>

Outcome:

Wrapper that allows a toast to be placed in a narrow column

Required:

No, optional element or modifier

Comments:

The addition of .slds-is-relative and .sdls-is-absolute is also required in this situation

.slds-notify-container
Deprecated
Applied to:

Outcome:

Initializes notification container

Required:

No, optional element or modifier

Comments:

--