---
schema_version: "1"
id: ce6601ed9c694daceb320dbb55103321d49dd5c0486fc58f9c1580be5f7a838e
title: Quick Action Panel (Beta)
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/quickActionPanel/lightning-quick-action-panel.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-quick-action-panel.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f52debf4fb5b0d4541f0aeca9a475866e86574fd7d4f790b928fef7904f8628a
products:
  - Lightning Component Reference
---
# Quick Action Panel (Beta)

**`lightning-quick-action-panel`**

Creates a modal with a body and a footer for a custom quick action.

**For Use In**

Lightning Experience

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

:::::tab

**note:** `lightning-quick-action-panel` is a pilot or beta service that is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/agreements/) or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the [Product Terms Directory](https://ptd.salesforce.com/). Use of this pilot or beta service is at the Customer's sole discretion.

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.

![Quick action panel with input fields](https://developer.salesforce.com/media/components/quick-action-panel-basic.png '{ "class":"image-md", "title": "Quick Action Panel"}')

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.

<!-- prettier-ignore-start -->
```html
<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>
```
<!-- prettier-ignore-end -->

## Design

`lightning-quick-action-panel` implements the modal blueprint in the Salesforce Lightning Design System (SLDS). The modal adapts 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                                              | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Create 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](/docs/platform/lightning-component-reference/guide/lightning-record-edit-form.html)
- Use the [lightning-record-form](/docs/platform/lightning-component-reference/guide/lightning-record-form.html) 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](https://developer.salesforce.com/docs/platform/lwc/guide/use-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](https://developer.salesforce.com/docs/platform/lwc/guide/reference-configuration-tags).

```js
<?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](https://help.salesforce.com/articleView?id=platform.actions_overview.htm&type=5).

## Component Styling

`lightning-quick-action-panel` provides a consistent UI for your custom screen action, matching the UI for standard Salesforce and Aura Lightning quick actions.

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.

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.

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

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-quick-action-panel header="My action">
        <div class="slds-p-around_large">Hello!</div>
    </lightning-quick-action-panel>
</template>
```
<!-- prettier-ignore-end -->

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

### Styling Hooks

Component styling hooks provide CSS custom properties that use the `--slds-c-*` prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the [SLDS 1 component blueprints](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) 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](#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](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-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](/docs/platform/lightning-component-reference/guide/lightning-navigation.html).

## 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](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro)

[Configure a Component for Quick Actions](https://developer.salesforce.com/docs/platform/lwc/guide/use-config-for-quick-actions)

[_Salesforce Help_: Quick Actions](https://help.salesforce.com/articleView?id=platform.actions_overview.htm&type=5)


:::::

:::::tab
::component-specification{component="quickActionPanel" model="lwc" namespace="lightning"}

:::::

::::::