Align action button with Lightning:card

Question

I'm building a custom UI with datatable and want to align the Lightning:card and action button in same line. Following is the code and screemshot of how it aligns now.

<lightning:card title = "Records" iconName = "custom:custom24" class="slds-table_bordered">
                <div class="slds-m-around_x-large">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                            <div class="slds-media__body">
                                <h3>
                                    <lightning:button class="slds-float_right slds-card__header-link slds-truncate" variant="neutral" label="Click Here!" iconName="utility:download" iconPosition="right"/>
                                    
                                </h3>
                            </div>
                        
                        
                    </header> 
                    <div >
                        <lightning:datatable data = "{! v.data }" 
                                             columns = "{! v.columns }" 
                                             keyField = "Id"
                                             maxRowSelection = "1"
                                             onrowselection = "{! c.onSelection }"
                                             />
                    </div>
                </div>
            </lightning:card>

I want align the button and lightning:card title in same line for this data table. Please guide

Answer 1

You'll want to set the actions attribute of the lightning:card to place an action in that spot

<lightning:card title = "Records" iconName = "custom:custom24" class="slds-table_bordered">
  <aura:set attribute="actions">
    <lightning:button variant="neutral" 
                      label="Click Here!" 
                      iconName="utility:download" 
                      iconPosition="right"/>
  </aura:set>
  <!-- rest of body of the card goes here --/>
</lightning:card>

https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

Answer 2

I was trying to do the same thing with Lightning components (no aura) and this is what worked for me (having slot="actions" in the button):

<lightning-card title="My Card Title">
<lightning-button label="Add New Item" slot="actions"></lightning-button>