Use the lightning-quick-action-panel component (Beta) to build your own action modals that use the Salesforce Lightning Design System (SLDS) modal styling. You can create custom screen actions and maintain a consistent UI across all actions, including standard Salesforce and Aura Lightning quick actions.

This component has a header attribute and two slots:

• The default slot for the body
• A footer slot for custom footer actions

The modal header renders only if you set the header attribute to a non-empty string. The modal footer renders only if you set the footer slot.

This example creates a simple modal with a header, body, and footer.

<template> <lightning-quick-action-panel header="My action"> Here's some content for the modal body. <div slot="footer"> <lightning-button variant="neutral" label="Cancel" ></lightning-button> <lightning-button variant="brand" label="Save" class="slds-m-left_x-small" ></lightning-button> </div> </lightning-quick-action-panel> </template> 

Creating A Form in the Modal Body

You can create a form for the modal in one of several ways.

• Use the lightning-record-edit-form component
• Use the lightning-record-form component In both approaches, the cancel and submit buttons are nested within the component itself, so the footer slot isn't needed.

Alternatively, use lightning-input and lightning-button components. With this approach, use the lightning-quick-action-panel component's footer slot to contain the buttons. For more information, see Quick Actions.

Enable the Component as a Screen Action

To enable your component to be used in an LWC screen action, add the lightning__RecordAction target to the component.js-meta.xml configuration file. This target designates the component as a record page action. For more information about lightning__RecordAction, see XML Configuration File Elements.

<?xml version="1.0" encoding="UTF-8" ?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordAction</target> </targets> <targetConfigs> <targetConfig targets="lightning__RecordAction"> <actionType>ScreenAction</actionType> </targetConfig> </targetConfigs> </LightningComponentBundle> 

The actionType value can be Action or ScreenAction. It defaults to ScreenAction. This configuration enables the component to appear under the Lightning Web Component menu in Object Manager so you can create a new action using the component. You must also add the action to the Salesforce Mobile and Lightning Experience Actions section of your page layout. For more information, see Quick Actions.

Component Styling

The lightning-quick-action-panel component implements the Modals blueprint in the SLDS.

This component implements the standard scrolling logic for Salesforce modals. When the text content reaches the maximum height, the header and footer remain fixed, and only the body content scrolls.

Customize Component Styling

To apply additional styling, use the SLDS utility classes with the class attribute.

This example adds padding around the content of the modal body.

<template> <lightning-quick-action-panel header="My action"> <div class="slds-p-around_large">Hello!</div> </lightning-quick-action-panel> </template> 

Similarly, add a utility class such as slds-m-left_x-small to your lightning-button component in the footer for uniform spacing.

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 SLDS 1. If you use component styling hooks, limit the components to SLDS 1 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 on custom styling, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

Usage Considerations

This component uses SLDS styling. If you want a fully customized component and action modal, create your own component markup and styling. Provide your markup without using lightning-quick-action-panel in the HTML template and include the configuration file as described in the Enable the Component as a Screen Action section.

You can also create a custom action that directly executes your code without any UI, known as a headless action. For more information, see Configure a Component for Quick Actions.

The lightning-record-form component provides another way to create a form in the modal body.

To create links in the component that navigate to pages, records, or lists in Lightning Experience, use the navigation service.

Accessibility

The modal window renders with role="dialog" and aria-modal="true". A modal dialog traps focus. When the modal opens, a user can't interact with the content behind the modal until they close the dialog. The viewport behind the modal is marked with aria-hidden="true", which prevents assistive technology from reading out the inactive content.

To close the modal, press the Esc key or click the X close button. Closing the modal moves focus back to the element that triggered the modal to open.

Press the Tab key to navigate through the focusable elements on the modal. Focus returns to the first focusable element at the top of modal, which is the X close button. Press the Shift+Tab keys at the top of modal to return focus back to the last focusable element at the bottom of the modal.

See Also

Work with Records using Base Components

Configure a Component for Quick Actions

Quick Actions