---
schema_version: "1"
id: dabb46bc0fdead561236cb407594955c6289f0c694d3ec96916750a601ced33a
title: Modal Footer
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/modalFooter/lightning-modal-footer.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal-footer.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: d6c70787c2623c3de68ae84fd7f59f7e76b489b62abe6273e027420835b65496
products:
  - Lightning Component Reference
---
# Modal Footer

**`lightning-modal-footer`**

The modal footer component to display footer content in lightning modal.

**For Use In**

Lightning Experience, Standalone Lightning App

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

:::::tab

The `lightning-modal-footer` component creates a footer at the bottom of a modal dialog.
Use of a footer is optional.

The modal components render in the order they appear in the template.
Place the `lightning-modal-footer` component after the `lightning-modal-body` component.

This sample's `lightning-modal-footer` includes two `lightning-button` components,
but you can also use `<button>` elements.

<!-- prettier-ignore-start -->
```html
<!-- my/modalDialog.html -->
<template>
    <lightning-modal-header label="My Modal">
    </lightning-modal-header>
    <lightning-modal-body>
        <!-- modal content specified in LightningModal component -->
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button
            class="slds-button"
            variant="neutral"
            label="Cancel"
            onclick={handleDismiss}
        ></lightning-button>
        <lightning-button
            class="slds-button slds-m-left_x-small"
            variant="brand"
            label="Save"
        ></lightning-button>
    </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).

## Design

Use `lightning-modal-footer` with `lightning-modal-body`, which 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

If you add buttons to the footer, you can use the accessibility attributes described in [`lightning-button`](/docs/platform/lightning-component-reference/guide/lightning-button.html).

When the modal opens, focus goes to the first interactive element in the modal. If there are no links in the header or any interactive elements
in the modal body, the first footer button gets initial focus.

## 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="modalFooter" model="lwc" namespace="lightning"}

:::::

::::::