Add button to the footer of a Lightning Quick Action component

I'm afraid you can't. I would like to be able to do it to, at least customize the behavior of the "Save" button, but unfortunately it's not possible.

As you said, you need either to put the button inside your component with force:lightningQuickAction, or recreate everything in a component with force:lightningQuickActionWithoutHeader. Solution 1 is easier but not good looking and not consistent with the standard UI, but solution 2 needs more work.

You can use Salesforce Lightning Design System modal as a starting point for solution 2, but bear in mind that the look & feel is different in Salesforce1, if you use it.

Also, you can create a Idea for that and post the link here, I would be the first one to vote for it.

Last point, if you have access to the Partner Community, I asked the question here so I guess you can add your own comment to the thread to show the PMs I'm not the only one interested.


Try this. After few css trick, I managed to fix it myself. This solution override the dialog box height which you mentioned while creating custom action on an object. I hope this will help someone needed.

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="MilindTest">     
<style>
    .cuf-content {
    padding: 0 0rem !important;
    }
    .slds-p-around--medium {
    padding: 0rem !important;
    }
    .slds-modal__content {
    overflow-y: hidden !important;
    height: unset !important;
    max-height: unset !important;
    }        
</style>

<div class="slds-col modal-header slds-modal__header">
    <h2 class="title slds-text-heading--medium">Milind Test</h2>
</div>
<div class="slds-col modal-body scrollable slds-p-around--medium" style="height: 200px; max-height: 400px; overflow-y: auto !important">
    <div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
</div>
<div class="slds-col modal-footer slds-modal__footer">        
    <lightning:button variant="neutral" label="Cancel" onclick="{! c.cancelClick }" />      
    <lightning:button variant="brand" label="Save" onclick="{! c.saveClick }" />
</div>