I have created a custom lightning page and it looks like the below screenshot.

enter image description here

But I want to place the delete button exactly before the cancel button

Can someone please suggest to achieve the same?

below is the code for the same

<aura:component controller="OverRideDeleteButton" implements="force:lightningQuickAction, force:hasRecordId" >
    <lightning:card >
        <p>Are you sure you want to delete this record</p>

        <div class="slds-docked-form-footer">
            <lightning:button variant="destructive" label="Delete" onclick="{!c.deleteRecord}"/>
  • were you able to make it work?
    – glls
    Commented Feb 11, 2019 at 18:55
  • Nope, I am still trying to
    – gs650x
    Commented Feb 12, 2019 at 5:40
  • @gs650x did you fix the footer of Lightning card footer with in force:lightningQuickAction?
    – sdandamud1
    Commented Dec 19, 2019 at 19:36

2 Answers 2


You can split your card into sections using aura:set's as specified in the documentation (ex, ehader, body, footer), you might want to refactor your code to something similar to what is provided in the documentation:

    <aura:set attribute="title">
        <lightning:icon iconName="utility:connected_apps" size="small"/>
        {! v.title }
    <aura:set attribute="footer">
        <lightning:badge label="Tag1"/>
        <lightning:badge label="Tag2"/>
        <lightning:badge label="Tag3"/>
    Card Body (custom component)
  • Thank you for responding, but the above code creates another footer top of the cancel button but I want to add a button right before the cancel button
    – gs650x
    Commented Feb 12, 2019 at 5:39
  • that is why i mentioend that you need to refactor your code to adopt the aforementioned structure, replace your footer with the ootb one from the lightning:card component
    – glls
    Commented Feb 12, 2019 at 14:07
  • I have implemented "force:lightningQuickAction" and added the above component as a custom button now I nowhere define the cancel button but still, it is there and if I use the above code provided by you it creates another footer instead of adding the button to the standard footer
    – gs650x
    Commented Feb 13, 2019 at 5:14

I've added some custom CSS on the footer div tag and then It worked in my case.

Note: add a class name where you want to apply CSS.

the codes are below like this.

.myFooter { width: 93%; position: fixed; bottom: 80px; background-color: white; padding: 10px; }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .