Aligning button next to lightning card title

buttonlightning-card

I am seeing so many examples to align lightning card title and a button. But all the examples that are provided are using slots="actions" in the button. But that will align the button to the right most in the line where the title is. My requirement is to show the button right next to the title.

<template>
        <lightning-card  title="Hello">
            <lightning-button label="New" slot="actions"></lightning-button>
        </lightning-card>
</template>

this will show the button as shown in the image below:
enter image description here

I want the button just after the Title "Hello". Can you help me with this?

Best Answer

Documentation:

title is available as an attribute or a slot. Pass in the title as a slot if you want to pass in markup, such as making the title bold.

Just use the title slot instead of the title attribute, so you can put the button in that markup.
I.E.

<template>
        <lightning-card>
            <div slot="title">Hello <lightning-button label="New" class="slds-var-m-left_small"></lightning-button></div>
            <p class="slds-p-horizontal_small">Card Body</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
</template>
Related Topic