How to Trigger Actions with Alert in iOS SwiftUI

Alerts are a fundamental part of iOS applications, serving as a way to interact with users by displaying messages or capturing decisions. While creating alerts in SwiftUI is straightforward, adding actions to them can make your app more dynamic and interactive.

In this blog post, we’ll focus on how to add actions to SwiftUI alerts.

What is an Action in SwiftUI Alert?

An action in a SwiftUI alert is a piece of code that gets executed when a user taps on an alert button. Actions can range from simple tasks like dismissing the alert to more complex operations like deleting a file or updating a database.

Basic Alert with Single Action

Create a State Variable

First, you’ll need a state variable to control the alert’s visibility.

@State private var showAlert = false

The @State variable showAlert will be used to control the alert’s visibility. When showAlert is set to true, the alert will appear.

Trigger the Alert

Create a button to trigger the alert.

Button("Show Alert") {
    showAlert = true
}

This button sets showAlert to true when tapped, which will trigger the alert to display.

Add Action to Alert

Now, let’s add an action to the alert button.

.alert(isPresented: $showAlert) {
    Alert(title: Text("Hello, SwiftUI!"),
          dismissButton: .default(Text("OK"), action: {
              print("OK button tapped")
          }))
}

The .alert modifier is used to display the alert. The dismissButton is set to execute a print statement when tapped, serving as our action.

Complete Code

Following is the complete code.

import SwiftUI

struct ContentView: View {
    @State private var showAlert = false
    
    var body: some View {
        Button("Show Alert") {
            showAlert = true
        }.alert(isPresented: $showAlert) {
            Alert(title: Text("Hello, SwiftUI!"),
                  dismissButton: .default(Text("OK"), action: {
                print("OK button tapped")
            }))
        }
    }
}

Alert with Multiple Actions

Add Multiple Buttons

You can add more than one button to an alert, each with its own action.

Alert(title: Text("Choose Option"),
      message: Text("Please choose an option."),
      primaryButton: .default(Text("Option 1"), action: {
          print("Option 1 selected")
      }),
      secondaryButton: .cancel(Text("Cancel"), action: {
          print("Cancel button tapped")
      }))

This alert has two buttons, each with a different action. The primary button prints “Option 1 selected,” and the secondary button prints “Cancel button tapped.”

Advanced Usage

Conditional Actions

You can also have conditional actions based on some logic.

Alert(title: Text("Are you sure?"),
      message: Text("This will delete all data."),
      primaryButton: .destructive(Text("Delete"), action: {
          if isUserAdmin {
              deleteAllData()
          }
      }),
      secondaryButton: .cancel())

In this example, the action associated with the “Delete” button checks if isUserAdmin is true. If it is, the deleteAllData() function is called.

Adding actions to SwiftUI alerts can greatly enhance the interactivity and functionality of your app. Whether you’re looking to perform a simple task or execute complex logic, actions in SwiftUI alerts offer a robust solution.