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.

<!-- 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>

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

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	Modals
For Use In	Lightning Experience, Standalone Lightning app	Lightning Experience

Accessibility

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.

Modal Footer

Design

Accessibility

See Also