Jump to Navigation
Skip to Content
Component Blueprints

Modals

  • HTML/CSS:Dev Ready
  • Layout:Adaptive

Sections

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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.

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

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 the appropriate context. 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#

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Examples#

Taglines#

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Headless#

<section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
  <div class="slds-modal__container">
    <header class="slds-modal__header slds-modal__header_empty">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Footless#

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Directional#

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Small Modal#

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Medium Modal#

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Large Modal#

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
  <div class="slds-modal__container">
    <header class="slds-modal__header">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Overview of CSS Classes#

Selector.slds-modal
Summary
Supportdev-ready
Restrictsection
VariantTrue
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
Summary

Use when modal header has no content

Restrict.slds-modal__header
Selector.slds-modal__title
Summary

Modal title (optional)

Restrict.slds-modal__header h2
Selector.slds-modal__content
Summary

Creates the scrollable content area for the modal.

Restrict.slds-modal div
Selector.slds-modal__menu
Summary

Creates the shaded menu area for the modal.

Restrict.slds-modal div
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
ModifierTrue
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
ModifierTrue
Selector.slds-modal_medium
Summary

Widens the modal to take more horizontal space than small

Restrict.slds-modal
ModifierTrue
Selector.slds-modal_large
Summary

Widens the modal to take more horizontal space than large

Restrict.slds-modal
ModifierTrue
Selector.slds-fade-in-open
Summary

Allows the modal to be visible.

Restrict.slds-modal
ModifierTrue
Selector.slds-slide-up-open
Summary
Restrict.slds-modal
ModifierTrue
Selector.slds-slide-up-saving
Summary
Restrict.slds-modal
ModifierTrue
Selector.slds-slide-down-cancel
Summary
Restrict.slds-modal
ModifierTrue
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
ModifierTrue

Modals Release Notes

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 between slds-modal_small and other sized modals slds-modal_medium and slds-modal_large)
  • Deprecated use of slds-text-heading_medium utility class on Modal title, added class slds-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)