Button with rounded corners in SwiftUI


In this SwiftUI tutorial, you are going to learn how to create a button with rounded corners.

To create a button with rounded corners we have to set the corner radius using the cornerRadius() modifier and provide the value as a parameter. The value will decide the amount of corner effect for the button.

Below is given an example of creating a button with a corner radius value of 22:

        Button(action: {
              print("Round Action")
            }) {
              Text("Press this button")
            }
            .padding()
            .background(.green)
            .foregroundColor(.white)
            .cornerRadius(22)

We have set the background color and foreground color so that the rounded effect is understandable.

The above code will create a button as given in the below screenshot:

Button with corner radius in SwiftUI

As you can see in the button we just created and round each corner of the button. In this case, the value of cornerRadius is 22. But you can assign any value you want like this:

...
.cornerRadius(14)