LWC: Adjust Width of Lightning-Button

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.


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