How to create a button in SwiftUI

A button is a fundamental UI control present in all applications, which has the ability to detect when the user interacts with it and perform a certain action.

If you are familiar with iOS programming, you will notice that the button in SwiftUI looks a lot like UIButton in UIKit. However, in SwiftUI we have more flexibility and options to customize a button.

Let’s start by creating a basic button in SwiftUI and XCode.

Creating a button in SwiftUI is very easy. We just need to use the following lines of code to create it:

Button {

	//What to perform

} label: }

	//How the button looks like

}

When we create a button we have to provide two blocks of code:

What action we have to execute, that is, the code to be executed once the button is pressed or selected by the user.

How the button looks like, that is, the code that describes the appearance of the button.

For example, if we only want to show a button we will use the following code:

struct ContentView: View {
    var body: some View {
        Button {
            print("Hello World tapped!")
        } label: {
            Text("Hello World")
        }
    }
}

After implementing this code the “Hello World” button appears:

The print in the first statement outputs the message to the XCode console.

Customizing the button font and background color

Having learned how to create a basic button, let’s explore how we can customize its appearance using the built-in modifiers. To modify the background color and text color of the button you can use the background and foregroundStyle modifiers, as in the following example:

Text("Hello World")
.background(.blue)
.foregroundStyle(.white)

If you want to change the font you can use the font modifier and specify the font type as in the following example:

Text("Hello World")
.background(.blue)
.foregroundStyle(.white)
.font(.title)

After the change the button will look like this:

As you may have noticed, the appearance of the button could be improved. Wouldn’t it be great to add some space around the text? To achieve this you can use the modifier padding like this:

Text("Hello World)
.padding()
.background(.blue)
.foregroundStyle(.white)

Once you make changes, the canvas will automatically update to reflect the changes. You will see a great improvement in the appearance of the button as it now incorporates the desired space around the text.

Adding borders to the button

Let’s modify the appearance of the button to create a button with borders. We use the following code:

Text("Hello World")
.foregroundStyle(.blue)
.padding()
.border(.blue, width: 5)

In this code snippet, the font color is blue and additional padding will be applied around the text. The border modifier is used to specify the border width and color. You can experiment with adjusting the value of the width parameter to see the effect on the appearance of the border.

How to create a button with border and background color

To create a button like the one in the following image (with borders and background color):

We are going to use the following code:

Text("Hello World")
                .fontWeight(.bold)
                .font(.title)
                .padding()
                .background(.red)
                .foregroundStyle(.white)
                .padding(10)
                .border(.red, width: 5)

To achieve this design we use two padding modifiers. The first padding combined with the background modifier is responsible for creating a button with padding and a red background color. The second padding modifier(10) adds extra padding around the button, while the border modifier defines a rounded border in red color.

How to create a button with rounded corners

If our goal is to create a button with rounded edges like the one in the image:

SwiftUI has a modifier called cornerRadius which allows us to create rounded corners. To render the background of buttons with rounded corners we simply apply the modifier cornerRadius and specify the corner radius, for example:

.cornerRadius(50)

Creating a border with rounded corners requires a slightly different approach, as the border modifier alone does not support rounded corners. We need to draw a separate border and overlay it on the button. Here is the Swift source code to achieve this:

Text("Hello World")
                .fontWeight(.bold)
                .font(.title)
                .padding()
                .background(.red)
                .cornerRadius(40)
                .foregroundStyle(.white)
                .padding(10)
                .overlay {
                    RoundedRectangle(cornerRadius: 40)
                        .stroke(.red, lineWidth: 5)
                }

The overlay modifier allows us to overlay an additional view on top of the current view. In the code we use the stroke modifier of the RoundedRectangle object to draw a border with rounded corners. The stroke modifier allows us to customize the stroke color and line width.