Components

Modals

Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

BaseBase › DefaultBase › TaglinesBase › LargeBase › DirectionalBase › Header emptyBase › Footer removedBasedev readyNot Compatible with S1 Mobile

Preview

Code

<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button 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 id="header43" class="slds-text-heading--medium">Modal Header</h2>
    </div>
    <div class="slds-modal__content slds-p-around--medium">
      <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>
      <p>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.</p>
    </div>
    <div class="slds-modal__footer">
      <button class="slds-button slds-button--neutral">Cancel</button>
      <button class="slds-button slds-button--brand">Save</button>
    </div>
  </div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>

Component Overview

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 reaches 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.

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 toggle aria-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
  • Modal has an aria-labelledby attribute whose value is the id of the modal’s heading

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

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create modals.
Class NameUsage
.slds-modal
Applied to:

<div>

Outcome:

Positions the modal to stretch to page edges

Required:

Required

Comments:

--

.slds-fade-in-open
Applied to:

.slds-modal

Outcome:

Allows the modal to be visible.

Required:

Required

Comments:

Apply this class to a modal with JavaScript to make it visible.

.slds-modal--large
Applied to:

.slds-modal

Outcome:

Widens the modal to take more horizontal space

Required:

No, optional element or modifier

Comments:

--

.slds-modal__container
Applied to:

<div>

Outcome:

Centers and sizes the modal horizontally and confines modal within viewport height

Required:

Required

Comments:

This should be nested immediately inside .slds-modal with nothing else nested on the same level.

.slds-modal__header
Applied to:

<div>

Outcome:

Creates the Modal Header container.

Required:

Required

Comments:

This should be nested immediately inside .slds-modal__container as the first element.

.slds-modal__close
Applied to:

.slds-button

Outcome:

Positions the close button to the top right outside of the modal.

Required:

Required

Comments:

Use JavaScript to make clicking this button remove the modal. This button contains a Close Action Icon.

.slds-modal__content
Applied to:

<div>

Outcome:

Creates the scrollable content area for the modal.

Required:

Required

Comments:

Either .slds-modal__content or .slds-modal__menu must be used. If you’re using this class, you do not need the other. This should be nested immediately inside .slds-modal_container and immediately after .slds-modal__header.

.slds-modal__menu
Applied to:

<div>

Outcome:

Creates the shaded menu area for the modal.

Required:

Required

Comments:

Either .slds-modal__menu or .slds-modal__content must be used. If you’re using this class, you do not need the other. This should be nested immediately inside .slds-modal_container and immediately after .slds-modal__header.

.slds-modal__footer
Applied to:

<div>

Outcome:

Creates the Modal Footer container.

Required:

Required

Comments:

This should be nested immediately inside .slds-modal_container and immediately after .slds-modal__container. Nothing should follow it. Note that by default, elements will be aligned to the right.

.slds-modal__footer--directional
Applied to:

.slds-modal__footer

Outcome:

Makes buttons inside the footer spread to both left and right.

Required:

No, optional element or modifier

Comments:

This is only needed when you have two buttons that indicate a back and forward navigation.

.slds-backdrop
Applied to:

<div>

Outcome:

Creates the shaded backdrop used behind the modal.

Required:

Required

Comments:

This should follow after the .slds-modal as an empty element.

.slds-modal-backdrop
Applied to:

<div>

Outcome:

Creates the shaded backdrop used behind the modal.

Required:

Required

Comments:

Deprecated

.slds-backdrop--open
Applied to:

.slds-modal-backdrop

Outcome:

Allows the backdrop to be visible.

Required:

Required

Comments:

Apply this class to a modal backdrop with JavaScript to make it visible.

.slds-modal-backdrop--open
Applied to:

.slds-modal-backdrop

Outcome:

Allows the backdrop to be visible.

Required:

Required

Comments:

Deprecated