How to change Background color of Rounded Corner Border Button in SwiftUI

SwiftUI Button is very flexible. You can create a rounded border button using a combination of modifiers.

In this example, we use .background, RoundedRectangle, and .stroke to produce a rounded bordered button.

Button {
                
} label: {
    Text("Bordered Button")
        .padding()
        .foregroundColor(.pink)
        .background(
            RoundedRectangle(
                cornerRadius: 20,
                style: .continuous
            )
            .stroke(.pink, lineWidth: 2)
        )
}

But if you want to apply a background color for this button, the process isn't straightforward.

You can't apply both the .fill and the .stroke modifier together on the same RoundedRectangle.

Button {
    
} label: {
    Text("Bordered Button")
        .padding()
        .foregroundColor(.pink)
        .background(
            RoundedRectangle(
                cornerRadius: 20,
                style: .continuous
            )
            .fill(.yellow) 
            .stroke(.pink, lineWidth: 2) // Cannot infer contextual base in reference to member 'pink'
        )
}

You will get the "Cannot infer contextual base in reference to member 'pink'" error.

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

Try it for Free

How to change Background color of Rounded Corner Border Button in SwiftUI

There might be several ways to do this, but I can give you two ways to do it.

1. Using overlay modifier.
2. Using ZStack.

Using overlay modifier

The first method is using .overlay modifier.

The overlay modifier will put the specified view in front of the view. We use this to draw a border on top of our background.

Button {
    
} label: {
    Text("Bordered Button")
        .padding()
        .foregroundColor(.pink)
        .background(
            RoundedRectangle(
                cornerRadius: 20,
                style: .continuous
            )
            .fill(.yellow)
        )
        .overlay {
            RoundedRectangle(
                cornerRadius: 20,
                style: .continuous
            )
            .stroke(.pink, lineWidth: 2)
        }
}

We use the same RoundedRectangle on both the background and the overlay modifiers to get the same curve.

But instead of applying .fill, we apply .stroke on the one in the .overlay modifier.

Using ZStack

The second method uses the same concept as the first one. We want to draw a border over the background view.

But instead of using overlay, we use ZStack this time.

Button {
    
} label: {
    Text("Bordered Button")
        .padding()
        .foregroundColor(.pink)
        .background(
            ZStack {
                RoundedRectangle(
                    cornerRadius: 20,
                    style: .continuous
                )
                .fill(.yellow)
                RoundedRectangle(
                    cornerRadius: 20,
                    style: .continuous
                )
                .stroke(.pink, lineWidth: 2)
            }
            
        )
}

The code is quite the same, we still need to duplicate the RoundedRectangle, but the advantage of this method is the overlay modifier is still free for other usages.