Modal Body

lightning-modal-body

The modal body component to display main content area in lightning modal.

For Use In

Lightning Experience, Standalone Lightning App

The lightning-modal-body component renders the content of a modal.

The modal components render in the order they appear in the template. Place the lightning-modal-body component after lightning-modal-header and before lightning-modal-footer components, if you're providing them.

This sample code shows the expected order of the modal components.

Your JavaScript class for the modal must extend from the lightning/modal module.

You can nest content in lightning-modal-body or lightning-modal-body automatically scrolls the modal's content when necessary. The modal's maximum height is calculated to prevent the content from exceeding the screen height, and scroll bars are automatically added.

lightning-modal-body implements the modals blueprint in the Salesforce Lightning Design System (SLDS). The modals adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

SLDS 1SLDS 2
DesignModalsModals
For Use InLightning Experience, Standalone Lightning appLightning Experience

See Lightning Web Components Developer Guide for more information about accessibility in modals.

lightning/modal

Lightning Web Components Developer Guide: Modal Windows