Prompt

Prompt

Prompt notice grabs the user’s attention & alert them of system-related issues/updates.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="demo-only" style="height:24rem;">
  <section 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">
      <header class="slds-modal__header slds-theme_error slds-theme_alert-texture">
        <button class="slds-button slds-button_icon 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>
      </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <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>
      <footer class="slds-modal__footer slds-theme_default">
        <button class="slds-button slds-button_neutral">Okay</button>
      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>

About Prompt

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

Overview of CSS Classes

Selector.slds-modal_prompt
Summary

Initializes Prompt style notification

Restrict.slds-modal
VariantTrue