Unable to stretch <lightning-button> tag to fill container

Question

I'm unable to stretch a <lightning-button> to occupy the full width of its container. While applying a style of display: block or a class of slds-size_12-of-12, for example, those styles/classes are applied to the <lightning-button> tag... however... when rendered, the tag appears to wrap an inner <button> tag, and the styles are not transferred to that tag, and it's that inner tag that appears to have all the content.

EDIT: The above completely rewritten for clarity

<lightning-layout>
    <lightning-layout-item flexibility="grow">
        <lightning-button
            label="click me"
            onclick={action}
            class="slds-size_12-of-12">
        </lightning-button>
    </lightning-layout-item>

    <lightning-layout-item flexibility="no-flex">
        ...

Answer 1

Many here suggested to use <button> instead of <lightning-button> as the slds-button_stretch class won't apply to it. But here is what you can do to use the <lightning-button> provided by salesforce lwc and at the same time stretch it to 100% width.

I insisted to use <lightning-button> instead of <button> because it's too easy while you want to use a button with an icon in <lightning-button> than using a normal <button>

Here's what I did to get a button with icon and full width:

<lightning-button icon-name="utility:upload" onclick={yourfunction} variant="brand" label="Download" style="display: grid; width: 100%"></lightning-button>

Hope this helps you. Thanks!

Answer 2

You can use the stretch attribute of the lightning-button to achieve that:

For example:

<div>
    <lightning-button
        variant="brand"
        label="Get Started"
        title="Get Started"
        stretch
    ></lightning-button>
</div>