Modal Body

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

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

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

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

lightning-button-menu supports these component styling hooks.

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