Prompt notice grabs the user’s attention & alerts them of system-related issues/updates.
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
Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different
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
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
- Modal has an
aria-describedbyattribute that matches the id of the modal message container.
- Modal message container container should have
Expected keyboard interaction (same as Modal, with the addition of):
- Modal message container should take initial focus