Make a SwiftUI button with style .bordered expand to full width

Question

I'm trying to make a SwiftUI button with .buttonStyle(.bordered) have the full width of the VStack it's in. Here's my button code:

Button("Save", action:saveUser)
    .frame(maxWidth:.infinity)
    .buttonStyle(.borderedProminent)

In the preview, I can see the actual frame is the full width of its container, but the background provided by the buttonStyle is not:

How can I make the border provided the button style also be full width?

Before applying any style set the frame. In my case i was using custom button style so before applying style, i used frame modifier and it worked. — Surjeet Rajput
– Surjeet Rajput, Commented Aug 29, 2024 at 15:00

Raja Kishan · Accepted Answer · 2021-11-18 04:40:27Z

20

Use this way to make a full-width button.

Button(action: {
    saveUser()
}) {
    Text("Save").frame(minWidth: 0, maxWidth: .infinity)
}.buttonStyle(.borderedProminent)

answered Nov 18, 2021 at 4:40

Raja Kishan

19.4k3 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Is a minWidth necessary? Also seems to work without setting it.