Modals
- HTML/CSS:Dev Ready
- Layout:Adaptive
Sections
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
About Modals#
Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide.
Modals always have an equal amount of space at the top and bottom to account for the height of the close button.
Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)
Modals can have a tagline in the header, simply by adding a paragraph after the heading.
By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (.slds-p-around_medium
).
Modal headers can also have taglines, if you need to provide additional context. This tagline can also contain links, or the whole thing could be a link in and of itself.
Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width.
These are modals that require a linearly directional paradigm of navigation (“Next” and “Back”, etc.) — the actionable buttons in the modal footer live on the left and right, rather than all on the right. These can either be within a large or default modal, depending on the use case.
If you're using a Modal for a system alert that the user must acknowledge, consider using a Prompt.
Accessibility#
Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal’s content. Focus shouldn’t return to the underlying page until the user presses the Esc key, presses an explicit “Cancel” or “Close” button in the modal, or performs another action that closes the modal.
Expected markup#
- Modal has
role="dialog"
- When the modal is open, everything behind it has HTML attribute
aria-hidden="true"
, so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and togglearia-hidden="true"
/aria-hidden="false"
on the main page's wrapper depending on whether or not the modal is open. - Modal contains an HTML heading. This is an
h1
tag by default but should update according to the surrounding DOM structure. While a semantic heading tag is preferable, if necessary applyingrole=”heading”
andaria-level
to a more generic element is acceptable. - Modal has an
aria-labelledby
attribute whose value is the id of the modal’s heading - Modal has an optional
aria-describedby
attribute whose value is the id of the modal's content. This should not be used for all modals, but in instances where the modal is being used as an analog to a javascriptconfirm()
oralert()
dialog to deliver a short prompt that can be responded to with a confirm/cancel button set (eg: Prompt). - Buttons which close the modal should have the same accessible text per WCAG guidelines.
Expected keyboard interactions#
- Esc key closes the modal and moves focus to whatever triggered the modal to open
- Tab key at bottom of modal cycles focus back to first focusable element at top of modal
- Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal
- Enter key submits modal’s form data, if applicable
Focus guidelines#
- Focus for modals must follow the guidelines described in the Accessibility Guidelines for Dialogs. Pay special attention to where focus is set when the modal opens.
- If no interactive element exists to set focus when the modal opens, add the appropriate
tabindex
attribute to the header to allow for programmatic focus (see "Footless" example, below).
Mobile#
On mobile devices, such as phones and other devices that have touch as the primary method of interaction, modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor.
Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.
Base#
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Examples#
Taglines#
Modal header
Here’s a tagline if you need it. It is allowed to extend across mulitple lines, so I’m making up content to show that to you. It is allowed to contain links or be a link.
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Headless#
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-label="Meaningful description of the modal content" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Footless#
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Directional#
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Small Modal#
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open slds-modal_small">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Medium Modal#
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open slds-modal_medium">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Large Modal#
Modal header
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.
Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa deserunt nostrud ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open slds-modal_large">
<div class="slds-modal__container">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
Styling Hooks Overview#
Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.
Category | Styling Hook Name | Value Type(s) | Fallback Value |
---|---|---|---|
Box Shadow | --slds-c-modal-shadow | String | 0 2px 3px 0 rgba(0, 0, 0, 0.16) |
Color | --slds-c-backdrop-color-background | Color | rgba(8, 7, 7, 0.6) |
--slds-c-modal-color-border | Color | #e5e5e5 | |
--slds-c-modal-content-color-background | Color | white | |
--slds-c-modal-content-text-color | Color | ||
--slds-c-modal-footer-color-background | Color | #f3f3f3 | |
--slds-c-modal-footer-text-color | Color | ||
--slds-c-modal-header-color-background | Color | white | |
--slds-c-modal-header-text-color | Color | ||
Font | --slds-c-modal-heading-font-size | Dimension | 1.25rem |
Radius | --slds-c-modal-radius-border | Dimension | 0.25rem |
Sizing | --slds-c-modal-sizing-border | Dimension | 2px |
Spacing | --slds-c-modal-footer-spacing-block-end | Dimension | 0.75rem |
--slds-c-modal-footer-spacing-block-start | Dimension | 0.75rem | |
--slds-c-modal-footer-spacing-inline-end | Dimension | 1rem | |
--slds-c-modal-footer-spacing-inline-start | Dimension | 1rem | |
--slds-c-modal-header-spacing-block-end | Dimension | 1rem | |
--slds-c-modal-header-spacing-block-start | Dimension | 1rem | |
--slds-c-modal-header-spacing-inline-end | Dimension | 1rem | |
--slds-c-modal-header-spacing-inline-start | Dimension | 1rem | |
Text | --slds-c-modal-heading-font-weight | String, Number | |
--slds-c-modal-heading-line-height | Number | 1.25 |
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 |
---|---|
Summary | |
Support | dev-ready |
Restrict | section |
Variant | True |
Selector | .slds-modal__menu Deprecated |
---|---|
Summary | Creates the shaded menu area for the modal. |
Restrict | .slds-modal div |
Selector | .slds-modal__container |
---|---|
Summary | Centers and sizes the modal horizontally and confines modal within viewport height |
Restrict | .slds-modal div |
Selector | .slds-modal__header |
---|---|
Summary | Creates the Modal Header container. |
Restrict | .slds-modal header |
Selector | .slds-modal__header_empty Deprecated |
---|---|
Summary | Use when modal header has no content |
Restrict | .slds-modal__header |
Selector | .slds-modal__title |
---|---|
Summary | Modal title (optional) |
Restrict | .slds-modal__header h1, .slds-modal__header h2, .slds-modal__header h3, .slds-modal__header h4, .slds-modal__header h5 |
Selector | .slds-modal__content |
---|---|
Summary | Creates the scrollable content area for the modal. |
Restrict | .slds-modal div |
Selector | .slds-modal__content_headless |
---|---|
Summary | Headless modal styling |
Restrict | .slds-modal__content |
Selector | .slds-modal__content_footless |
---|---|
Summary | Footless modal styling |
Restrict | .slds-modal__content |
Selector | .slds-modal__footer |
---|---|
Summary | Creates the Modal Footer container. |
Restrict | .slds-modal footer |
Selector | .slds-modal__footer_directional |
---|---|
Summary | Makes buttons inside the footer spread to both left and right. |
Restrict | .slds-modal__footer |
Modifier | True |
Selector | .slds-modal__close |
---|---|
Summary | Positions the close button to the top right outside of the modal. |
Restrict | .slds-modal button |
Selector | .slds-modal_small |
---|---|
Summary | Widens the modal to take more horizontal space than default |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-modal_medium |
---|---|
Summary | Widens the modal to take more horizontal space than small |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-modal_large |
---|---|
Summary | Widens the modal to take more horizontal space than large |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-fade-in-open |
---|---|
Summary | Allows the modal to be visible. |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-slide-up-open |
---|---|
Summary | |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-slide-up-saving |
---|---|
Summary | |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-slide-down-cancel |
---|---|
Summary | |
Restrict | .slds-modal |
Modifier | True |
Selector | .slds-backdrop |
---|---|
Summary | Creates the shaded backdrop used behind the modal. |
Restrict | .slds-modal ~ div |
Selector | .slds-backdrop_open |
---|---|
Summary | Allows the backdrop to be visible. |
Restrict | .slds-backdrop |
Modifier | True |
Modals Release Notes
2.18.0
Changed
- Added
slds-modal__content_footless
class to example for clarity. - Added clarifying notes around modal focus and header for accessibility, and modified Footless example to show tabindex.
2.17.0
Added
- Added
slds
as the default namespace withsds
fallbacks for Styling Hooks. - Added CSS Custom Property reassignments for variants and states.
- Added clarifying notes around modal focus for accessibility.
- Added
.slds-modal__content_headless
andslds-modal__content_footless
classes for styling modal content.
Changed
- Changed
header
andfooter
to genericdiv
tags for better accessibility semantics. - Changed assistive text for close buttons in modals, and added notes to accessibility documentation.
- Changed default header level from
h2
toh1
for semantics and added more description around using headers in the Accessibility section. - Removed redundant
title
attribute from modal close button. - Updated use of
aria-describedby
attribute for modal content, and clarified in accessibility documentation section. - Added the
role="presentation"
attribute to the modal backdrop. - Moved
slds-modal__close
out of the modal header container and adjusted styles and annotations accordingly. - Headless modal variant no longer requires
slds-modal__header
in the markup.
Deprecated
- Deprecated older styles for previous markup of the
slds-modal__close
button.
2.14.0
Added
- Added styling hooks for text color that let you set the
color
for the whole modal or a specific section. - Added styling hooks for background color that let you set the
background-color
for the whole modal or a specific section.
Fixed
- Fixed incorrect styling hooks on heading
2.13.3
Fixed
- Fixed incorrect styling hooks on footer.
2.13.1
Fixed
- Fixed issue where mobile text size wasn't accurately sized.
- Small improvements to the UI text.
2.13.0
Added
- Enabled styling hooks for modal. See modal's styling hooks overview table for a full listing of the currently available hooks.
2.11.7
Added
- Added documentation and examples for mobile/touch context
2.10.0
Changed
- Changed
slds-modal_small
width to percentage-based to address the disparity of size relationship betweenslds-modal_small
and other sized modalsslds-modal_medium
andslds-modal_large
) - Deprecated use of
slds-text-heading_medium
utility class on Modal title, added classslds-modal__title
to declare styles for the Modal title. - For touch devices:
- Set font weight of Modal title to
$font-weight-bold
- Set tap target size of the Modal close button to
$height-tappable
(2.75rem)
- Set font weight of Modal title to