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

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

lightning-modal-footer implements the modals blueprint in the Salesforce Lightning Design System (SLDS).

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Modals: Styling Hooks Overview for documentation on component-specific hooks for this component.

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

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.

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