Loading
×Sorry to interrupt
CSS Error
Lightning Web Component

Modal Body

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

    Descriptor

    lightning-modal-body

    Targets

    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. The modal content is created in a separate component extended from LightningModal. See Lightning Web Components Developer Guide

<!-- my/modalDialog.html --> <template> <lightning-modal-header label="My Modal Heading"> Tagline content with <a href="https://salesforce.com">Salesforce.com link</a> </lightning-modal-header> <lightning-modal-body> <!-- modal content specified in LightningModal component --> { content } <!-- alternatively, add content here directly --> </lightning-modal-body> <lightning-modal-footer> Footer Content </lightning-modal-footer> </template> 

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.

Component Styling

lightning-modal-body implements the modals blueprint in the Salesforce Lightning Design System (SLDS).

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with SLDS 1. If you use component styling hooks, limit the components to SLDS 1 themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Modals: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

Accessibility

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

Documentation
Specification