Modals

.slds-modal

base

.slds-modal

base › Full

base › Full Tagline

base › Full Headless

base › Full Footless

base › Taglines

base › Header empty (Headless)

base › Footer removed (Footless)

base › Footer hidden but not removed (not public)

base › Headless and Footless

base › Headless and Footless - deprecated

base › Large

base › Medium

base › Small

base › Directional

base › Deprecated - Menu

base › Disabled Close Button (internal only)

base › Deprecated - Old Close Button

.slds-modal__menu

.slds-modal__menu — Creates the shaded menu area for the modal.

.slds-modal__container

.slds-modal__container — Centers and sizes the modal horizontally and confines modal within viewport height

.slds-modal__header

.slds-modal__header — Creates the Modal Header container.

.slds-modal__header_empty

.slds-modal__header_empty — Use when modal header has no content

.slds-modal__title

.slds-modal__title — Modal title (optional)

.slds-modal__content

.slds-modal__content — Creates the scrollable content area for the modal.

.slds-modal__content_headless

.slds-modal__content_headless — Headless modal styling

.slds-modal__content_footless

.slds-modal__content_footless — Footless modal styling

.slds-modal__footer

.slds-modal__footer — Creates the Modal Footer container.

.slds-modal__footer_directional

.slds-modal__footer_directional — Makes buttons inside the footer spread to both left and right.

.slds-modal__close

.slds-modal__close — Positions the close button to the top right outside of the modal.

small

.slds-modal_small — Widens the modal to take more horizontal space than default

medium

.slds-modal_medium — Widens the modal to take more horizontal space than small

large

.slds-modal_large — Widens the modal to take more horizontal space than large

full

.slds-modal_full — Makes the modal full screen in small viewports

.slds-fade-in-open

.slds-fade-in-open — Allows the modal to be visible.

.slds-slide-up-open

.slds-slide-up-saving

.slds-slide-down-cancel

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.