Modal Footer

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.

1<!-- my/modalDialog.html -->
2<template>
3    <lightning-modal-header label="My Modal">
4    </lightning-modal-header>
5    <lightning-modal-body>
6        <!-- modal content specified in LightningModal component -->
7    </lightning-modal-body>
8    <lightning-modal-footer>
9        <lightning-button
10            class="slds-button"
11            variant="neutral"
12            label="Cancel"
13            onclick={handleDismiss}
14        ></lightning-button>
15        <lightning-button
16            class="slds-button slds-m-left_x-small"
17            variant="brand"
18            label="Save"
19        ></lightning-button>
20    </lightning-modal-footer>
21</template>

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

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.

If you add buttons to the footer, you can use the accessibility attributes described in lightning-button.

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.

lightning/modal

Lightning Web Components Developer Guide: Modal Windows