In LWC, how can I make a lightning-button use the full width available to it?
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>
</div>
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-lwc
<button type="button" name="Submit Case" value="Submit Case" class="stretchButton slds-button slds-button_brand" onclick={handleClick} >Submit Case</button>
button.css
.stretchButton{
display:block;
min-width: 100%;
}
the first button is the namespaced lighnting-button component, the second one is the slds blueprint.