Prompt
- HTML/CSS:Dev Ready
- Layout:Responsive
Sections
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. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.
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):
- 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
tabindex="0"
Keyboard Interaction#
Expected keyboard interaction is the same as Modals, with the addition of:
- Modal message container should take initial focus
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#
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. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.
<div class="demo-only" style="height:24rem">
<section role="alertdialog" tabindex="0" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-theme_error slds-theme_alert-texture">
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-modal_prompt |
---|---|
Summary | Initializes Prompt style notification |
Support | dev-ready |
Restrict | section[role="alertdialog"] |
Variant | True |
Prompt Release Notes
2.13.1
Fixed
- Small improvements to the UI text.