---
schema_version: "1"
id: 9ee732561146e66a6f56f642f79731dd140e701d4c1e5e7df957901a211260bb
title: Modal Body
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/modalBody/lightning-modal-body.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal-body.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3cc8d03583bcb1f65550ba02d001e03838137b256341821c8b236746a8947405
products:
  - Lightning Component Reference
---
# 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

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

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.

<!-- prettier-ignore-start -->
```html
<!-- 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>
```
<!-- prettier-ignore-end -->

Your JavaScript class for the modal must extend from the [`lightning/modal` module](/docs/platform/lightning-component-reference/guide/lightning-modal.html).

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.

## Design

`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 1                                                            | SLDS 2                                                                                                          |
| :------------- | :---------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Modals](https://v1.lightningdesignsystem.com/components/modals/) | [Modals](https://www.lightningdesignsystem.com/components/modals/)                                              |
| **For Use In** | Lightning Experience, Standalone Lightning app                    | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Accessibility

See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.

## See Also

[`lightning/modal`](/docs/platform/lightning-component-reference/guide/lightning-modal.html)

[_Lightning Web Components Developer Guide_: Modal Windows](https://developer.salesforce.com/docs/platform/lwc/guide/use-dialog-modal.html)


:::::

:::::tab
::component-specification{component="modalBody" model="lwc" namespace="lightning"}

:::::

::::::