How to Set Button Background Color in iOS SwiftUI

In this blog post, we focus on an essential aspect of user interface design in SwiftUI – customizing the background color of buttons. Buttons serve as pivotal interactive elements within any application. Tailoring their look to align with your application’s theme and functionality can greatly enhance the overall user experience.

Let’s discover how SwiftUI makes it straightforward and intuitive to modify the background color of buttons.

Basics: Set the Button Background Color

Setting the background color of a button in SwiftUI involves using the .background() modifier and specifying your desired color. Below is an illustrative example:

Button(action: {
    print("Button tapped!")
}) {
    Text("Tap me")
        .foregroundColor(.white)
        .padding(10)
        .background(Color.blue)
        .cornerRadius(5)
}

In this instance, our button, labeled “Tap me”, has a background color set to blue using the .background(Color.blue) modifier. The text color is white, there’s padding around the text, and the corners of the button are slightly rounded with a radius of 5.

Customize Button Shape and Padding

SwiftUI enables you to refine the appearance of your button further by defining its shape using various shape types like Capsule(), Circle(), or RoundedRectangle(). Adding padding before setting the background color can give your button a more spacious, touch-friendly appearance:

Button(action: {
    // Action
}) {
    Text("Tap me!")
    .padding()
    .background(Capsule().fill(Color.yellow))
}

In this code snippet, padding is applied to the text view first, followed by creating a Capsule shape filled with green color, which serves as the button’s background.

SwiftUI makes setting and customizing button background colors an incredibly straightforward process, facilitating the enhancement of your app’s aesthetic and user experience. Leveraging SwiftUI’s easy-to-use modifiers you can craft interactive, dynamic, and visually engaging buttons with minimal lines of code.