I have built a form using lightning-record-edit-form & have added a button to it using lightning-button. I want the button to have 100% width, so I added a class to lightning-button that sets display:block and width:100% but I'm not getting the results I was hoping for.

Here is the relevant markup:

   label="Create Case" 
   class="stretchButton slds-p-top_x-small"></lightning-button>

And here is the CSS definition:

.stretchButton {display:block; width: 100%;}

And here's a screenshot of the result in the console. enter image description here

As you can see, lightning-button element has been set to 100% width, but the underlying button element has not.

Does anyone have any advice on how to set the underlying button's width to 100%?

  • did you try min-width ?
    – glls
    Commented Mar 19, 2019 at 13:57
  • class doesn't seem to be an attribute for lightning-button, so I doubt if having anything there will have any effect.
    – Jayant Das
    Commented Mar 19, 2019 at 14:00
  • the screenshot seems to imply that the class name is being properly handled by the component
    – glls
    Commented Mar 19, 2019 at 14:06
  • 1
    @glls: Yes, lightning-button is at a 100%. But the underlying button is not. In the template markup there is only one element called lightning-button, but in the HTML output, a child element called button is added. It is this child I am trying to affect. But sadly since it's not in my template, I'm not sure how to do that.
    – Jack Odell
    Commented Mar 19, 2019 at 14:14
  • 1
    Per @mike537, use the stretch attribute. (I can't submit this as an answer because this question was, incorrectly, closed as a duplicate).
    – mhenry1384
    Commented Mar 21 at 10:48

2 Answers 2


You can't style the underlying button of a <lightning-button>.

There is an SLDS class for this though:

<button type="submit" class="slds-button slds-button_brand slds-button_stretch">Create Case</button>

Edit clarification:

As glls pointed out below and elsewhere, you can't style child components from parents (or siblings for that matter) due to LWC's use of Shadow DOM.

When you apply the classes below to the lightning-button, you actually get a "button" within a button, as you can kind of see in the screenshot of the LWC Button and can see more clearly when using developer tools to inspect the elements.

    <div class="slds-p-around_small">
        <button type="submit" class="slds-button slds-button_brand slds-button_stretch">HTML Button</button>
        <lightning-button variant="brand" label="LWC Button" title="LWC Button" class="slds-button slds-button_brand slds-button_stretch"></lightning-button>


  • 2
    thanks! That did it! I had tried slds-button_stretch on its own, but I had not tried to use it in conjunction with slds-button and slds-button_brand. When all three are used, the underlying button will stretch to the available width.
    – Jack Odell
    Commented Mar 19, 2019 at 17:44
  • One minor edit on your answer to help others in the future: could you change the element to lightning-button instead of button.
    – Jack Odell
    Commented Mar 19, 2019 at 17:50
  • 2
    this doesn't aesthetically works with neutral buttons since both the buttons have border and both borders are visible Commented Oct 1, 2019 at 11:21
  • 2
    I would recommend NOT using this method. First, this poses some accessibility issues due to the focus being buried on the "inner" button. Second the hover states get too confusing.
    – David
    Commented Jul 13, 2020 at 20:15
  • 2
    I don't remember which release this was a part of, but now there is an attribute called 'stretch' in lightning-button that will fully expand the width. See documentation
    – mike537
    Commented Jan 6, 2023 at 22:30

Basically, you wont be able to change it because styles defined in a component’s style sheet are scoped to the component and your CSS cannot reach into the child component of the lightning-button component. You will have to add your own custom button:


<button type="button" name="Submit Case" value="Submit Case" class="stretchButton slds-button slds-button_brand" onclick={handleClick} >Submit Case</button>


    min-width: 100%;

enter image description here

the first button is the namespaced lighnting-button component, the second one is the slds blueprint.

  • 1
    +1 beauty of shadow dom. Commented Mar 19, 2019 at 14:54
  • Sorry. but Jake's answer is better.
    – Jack Odell
    Commented Mar 19, 2019 at 17:46
  • its fine =), as long as you have been served
    – glls
    Commented Mar 19, 2019 at 17:49

You must log in to answer this question.

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