---
schema_version: "1"
id: c06cfe4cfafab3811acefd23de889eab4821776f748e1427c3f62ee7bcab5f9e
title: Configure Components for Custom Actions
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-using-lex-s1-config-action.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-using-lex-s1-config-action.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 37cf19e62315fd034249dbfd163c5f2587e018d7db069f2350d2b09415c514c1
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Configure Components for Custom Actions

Add the `force:lightningQuickAction` or `force:lightningQuickActionWithoutHeader` interface to an Aura component to enable it to be used as a custom action in Lightning Experience or the Salesforce mobile app. You can use components that implement one of these interfaces as object-specific or global actions in both Lightning Experience and the Salesforce mobile app.

When used as actions, components that implement the `force:lightningQuickAction` interface display in a panel with standard action controls, such as a **Cancel** button. These components can display and implement their own controls in the body of the panel, but can’t affect the standard controls. It should nevertheless be prepared to handle events from the standard controls.

If instead you want complete control over the user interface, use the `force:lightningQuickActionWithoutHeader` interface. Components that implement `force:lightningQuickActionWithoutHeader` display in a panel without additional controls and are expected to provide a complete user interface for the action.

These interfaces are mutually exclusive. That is, components can implement either the `force:lightningQuickAction` interface or the `force:lightningQuickActionWithoutHeader` interface, but not both. This should make sense; a component can’t both present standard user interface elements and *not* present standard user interface elements.

**note:** For your Aura component to work as a custom action, you must set a default value for each component attribute marked as required.

## Example Component

Here’s an example of a component that can be used for a custom action, which you can name whatever you want—perhaps “Quick Add”. (A component and an action that uses it don’t need to have matching names.) This component quickly adds two numbers together.

```nolang
<!--quickAdd.cmp-->
<aura:component implements="force:lightningQuickAction">

    <!-- Very simple addition -->

    <lightning:input type="number" name="myNumber" aura:id="num1" label="Number 1"/> +
    <lightning:input type="number" name="myNumber" aura:id="num2" label="Number 2"/>

    <br/>
    <lightning:button label="Add" onclick="{!c.clickAdd}"/>

</aura:component>
```

The component markup simply presents two input fields, and an **Add** button.

The component’s controller does all the real work.

```javascript
/*quickAddController.js*/
({
    clickAdd: function(component, event, helper) {

        // Get the values from the form
        var n1 = component.find("num1").get("v.value");
        var n2 = component.find("num2").get("v.value");

        // Display the total in a "toast" status message
        var resultsToast = $A.get("e.force:showToast");
        resultsToast.setParams({
            "title": "Quick Add: " + n1 + " + " + n2,
            "message": "The total is: " + (n1 + n2) + "."
        });
        resultsToast.fire();

        // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    }

})
```

Retrieving the two numbers entered by the user is straightforward, though a more robust component would check for valid inputs, and so on. The interesting part of this example is what happens to the numbers and how the custom action resolves.

The results of the add calculation are displayed in a “toast,” which is a status message that appears at the top of the page. The toast is created by firing the `force:showToast` event. A toast isn’t the only way you could display the results, nor are actions the only use for toasts. It’s just a handy way to show a message at the top of the screen in Lightning Experience or the Salesforce mobile app.

What’s interesting about using a toast here, though, is what happens afterward. The `clickAdd` controller action fires the `force:closeQuickAction` event, which dismisses the action panel. But, even though the action panel is closed, the toast still displays. The `force:closeQuickAction` event is handled by the action panel, which closes. The `force:showToast` event is handled by the one.app container, so it doesn’t need the panel to work.

**See Also**  


-   [Configure Components for Record-Specific Actions](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-using-lex-s1-config-action-recordid.md)