0

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?

2
  • If you need the button to the left, why not just use a div instead of a lightning-card ?
    – Rohit
    Commented Feb 27, 2023 at 17:00
  • I have other fields in the lightning card. So i cannot use div for what I am looking for.
    – CodeGirl
    Commented Feb 27, 2023 at 17:16

1 Answer 1

3

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>
2
  • 1
    Great answer @rubenDG. did not know this !
    – Rohit
    Commented Feb 27, 2023 at 17:49
  • Thank you! That exactly what I wanted.
    – CodeGirl
    Commented Feb 27, 2023 at 19:19

You must log in to answer this question.

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