s attention & alerts them of system-related issues/updates.

Example Only

Service Unavailable

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. Caritatem vidisse voluptate velit usu at, vis sumo veniam ad, novum adipisci voluptatum te vel.

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.

Implementation Guidelines

Markup

Expected markup is the same as Modals (/components/modals), but with the following differences):

Keyboard Interaction

Expected keyboard interaction is the same as Modals, with the addition of:

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 additionally they should be described 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 tabindex="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.

Base

Interactive Prompt Examples

)">OK )">Got it )">Continue )">Delete

Component API

Basic Prompt Structure

<section role="alertdialog" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-id" class="slds-modal slds-fade-in-open slds-modal_prompt"> <div class="slds-modal__container" tabindex="0" id="prompt-message-id"> <header class="slds-modal__header slds-theme_error slds-theme_alert-texture"> <h2 class="slds-modal__title slds-hyphenate" id="prompt-heading-id"> Error Title </h2> </header> <div class="slds-modal__content slds-p-around_medium"> <p>Error message content goes here.</p> </div> <footer class="slds-modal__footer slds-theme_default"> <button class="slds-button slds-button_neutral">OK</button> </footer> </div></section><div class="slds-backdrop slds-backdrop_open"></div>

Theme Variations

Available Theme Classes

Always combine with .slds-theme_alert-texture for the striped gradient effect.

Styling Hooks Overview

The prompt component supports various styling hooks for customization. Key classes include:

CDN

This page uses the Salesforce Lightning Design System via: https://cdnjs.cloudflare.com/ajax/libs/design-system/2.27.2/styles/salesforce-lightning-design-system.min.css

' width="100%" height="1800" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">