Customizing buttons in SwiftUI with the ButtonStyle protocol

SwiftUI provides a ButtonStyle protocol which allows us to create reusable button styles without having to create new views.

Let's directly jump into an example.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

When working with buttons, SwiftUI provides modifiers to customize them. Instead of writing:

Button("Primary", action: someAction)
    .padding(.horizontal, 20)
    .padding(.vertical, 10)
    .foregroundColor(.white)
    .background(Color.red)
    .clipShape(RoundedRectangle(cornerRadius: 10))

we can encapsulate that style:

struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 20)
            .padding(.vertical, 10)
            .foregroundColor(.white)
            .background(Color.red)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

Then reuse it cleanly:

Button("Primary", action: someAction)
    .buttonStyle(PrimaryButtonStyle())

The makeBody function provides a configuration that we can use to adjust the appearance. It also provides the property isPressed which indicates whether the user is currently pressing the button.

.foregroundColor(configuration.isPressed ? .brown : .red)

Another benefit we get is that we can set the button style in the environment of a view.

VStack(spacing: 10) {
    Button("Primary button 1") {}
    Button("Primary button 2") {}
    Button("Primary button 3") {}
}
.buttonStyle(PrimaryButtonStyle())

Setting the button style on the VStack will automatically apply it to all the buttons inside the view.