5

Given the following:

<div style="display:inline-block">
    <lightning-button style="..." class="..." onclick={...} label="..."></lightning-button>
</div>

How can I adjust the width of the Lighting-Button?

I essentially want all my buttons to be the same width for UX purposes.

I have already tried the suggestions in various other posts (using CSS) with no luck.

Improve this question

5 Answers 5

Reset to default
7

You can't. The button inside is designed to only be as large as it needs to be. I took a look at the code, and it renders like this:

<lightning-button c-app_app="" class="button-classes">
    <button type="button" class="slds-button slds-button_neutral">
        Demo
    </button>
</lightning-button>

Where button-classes is whatever you put in to the class attribute:

<lightning-button class="button-classes" label="Demo"></lightning-button>

Therefore, it seems reasonable that nothing you do will work, short of writing your own custom component. As frustrating as that is, that's the current state of affairs until the component or the related CSS is fixed.

Improve this answer
1
  • Thanks for the quick response and the thorough answer.
    – Mr. B
    Commented Oct 11, 2019 at 16:42
6

After looking a little further into accomplishing what I'm asking, and reading up on the Lightning Design System, I figured out that you can use a regular button tag to accomplish what I'm trying to do (instead of the Lightning-Button tag), while also retaining the Salesforce style:

<button class="slds-button slds-button_neutral slds-button_stretch" onclick={...}>...</button>

Notice that you can still bind the onclick event to your LWC JS class using the curly braces. Also, notice the label attribute text content is simply moved to inside the button tag.

Because the button tag is standard HTML5, you can also use the style attribute to define custom CSS in the following fashion:

<button class="..." style="width:250px" onclick={...}>...</button>

Reference: https://www.lightningdesignsystem.com/components/buttons/#Stretch

Improve this answer
1
  • After figuring this out, I felt like perhaps I'm doing a lot of things the wrong way by using the baked-in lightning tags, but of course tags like <lightning-input-field> contain richness that would require a lot of customization to mimic.
    – Mr. B
    Commented Oct 11, 2019 at 20:40
1

Use the "stretch" attribute.

<lightning-button
    variant="brand"
    label="Get Started"
    title="Get Started"
    stretch
    style="width: 200px"
></lightning-button>

Adjust "width" as desired, of course.

Improve this answer
0

I've also found that you can just nest a <lightning button> in a <button> and just kind of try to make them blend together. Did this because I was using "label" attribute to do a calculation in JavaScript.

<template for:each={room.numberOfDays} for:item="day">
            <div class="slds-col slds-size_1-of-7 slds-var-p-top_small" key={room.numberOfDays}>
                <button class="slds-button slds-button_neutral slds-button_stretch butOn" style="width:65px" value={room.month} title="day" onclick={handleDatePick}>
                    <lightning-button value={room.month} title="day" onclick={handleDatePick} label={day}></lightning-button>
                </button>
            </div>
          </template>
Improve this answer
-1

You can! Add the slds class:-

<lightning:button  class="slds-button_stretch slds-size_6-of-12" ...
Improve this answer

You must log in to answer this question.

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