2

How to align the lightning card title and button on same line, in aura there is aura:set but not sure if we have anything similar in lwc:

<template>
    <lightning-card title="Similar Properties" icon-name="custom:custom85">
        <lightning-button label="Neutral" title="Preview" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    </lightning-card>
</template>
Improve this question

1 Answer 1

Reset to default
4

slot in LWC is alternative to aura:set, LWC team has defined slot named actions for the action button in base component: lightning-card.

You can set slot="actions" to the button inside lightning-card, this should align the button next to title.

Code:

<template>
    <div class="app slds-p-around_x-large">
        <lightning-card title="Similar Properties" icon-name="custom:custom85">
            <lightning-button label="Neutral" 
                title="Preview" class="slds-m-left_x-small" 
                slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body</p>
        </lightning-card>
    </div>
</template>

Output: enter image description here

Improve this answer

You must log in to answer this question.

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