6 - Add a Button in SwiftUI

Buttons are essential for creating interactive elements in your user interface. In SwiftUI, you create buttons by using the Button view.

Here’s an example:

struct ContentView: View {
  var body: some View {
    Button(action: {
      print("Button Pressed")
    }, label: {
      Text("Press Me!")
    })
  }
}

In the above example, when the button is pressed, the action closure will be executed, which simply prints a message to the console. The label of the button is set to “Press Me!” using a Text view. You can customize the appearance of the button by modifying the Text view.

You can customize the look of a button using view modifiers. Try the following:

struct ContentView: View {
  var body: some View {
    Button(action: {
      print("Button Pressed")
    }, label: {
      Text("Press Me!")
        .font(.largeTitle)
        .foregroundColor(.white)
    })
    .padding()
    .background(
      LinearGradient(gradient: Gradient(colors: [.purple, .pink]), startPoint: .topLeading, endPoint: .bottomTrailing)
    )
    .cornerRadius(10)
  }
}

The above code adds padding, a gradient background and a corner radius to the button. We also increased the font size of the label and changed its color to white. It should look like the following:

A SwiftUI button styled with rounded corners and a gradient.

For more details, see the “Buttons in SwiftUI” section in this cookbook.