SwiftUI Alert: Best Practices and Examples

When creating a mobile app it’s important to notify the users when something happens like an API request went OK or failed. With SwiftUI Alerts, you can quickly inform users, gather input, and prompt them to take specific actions. In this article, we’ll explore the power of SwiftUI Alerts and learn how to leverage them to enhance user interaction in your apps.

SwiftUI basic alert example

To create an alert, use the Alert struct and pass in the message to be displayed, as well as any action buttons that should be included.

The following will display an alert with the title “Error” and the message “The request failed. Try again later.”, with a dismiss button labeled “OK”:

import SwiftUI

struct AlertContent: View {
    @State private var showingSimpleAlert = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.showingSimpleAlert = true
            }) {
                Text("Simple Alert")
            }
            .alert("Error", isPresented: $showingSimpleAlert) {
            } message: {
                Text("The request failed. Try again later.")
            }
        }
    }
}

The result:

SwiftUI alert with input

In addition to displaying messages and buttons, SwiftUI Alerts can also include text fields to allow users to input information directly within the alert. This feature can be particularly useful when gathering user input or capturing data. Let’s explore how to create an alert with a text field in SwiftUI.

Here we will create an alert with a textField and when the user pressed the button called “SEND” it will execute the function called sendUserInput.

struct AlertContent: View {
    @State private var showingSimpleAlert = false
    @State private var userInput: String = ""
    var body: some View {
        VStack {
            Button(action: {
                self.showingSimpleAlert = true
            }) {
                Text("Simple Alert")
            }
            .alert("Feedback", isPresented: $showingSimpleAlert) {
                TextField("Enter user input", text: $userInput)
                Button("SEND", action: sendUserInput)

            } message: {
                Text("Please give us feedback.")
            }
        }
    }
    
    func sendUserInput() {
        print("Sending user input")
    }
}

The result:

Alert with multiple buttons in SwiftUI

With multiple buttons open up a world of possibilities for enhancing user interactions in your apps and luckily it is very easy to add multiple buttons.

In the following example, we add three buttons and we will assign different roles to them. The .cancel role makes the text bold and the .destructive makes the text red.

 .alert("Feedback", isPresented: $showingSimpleAlert) {
                TextField("Enter user input", text: $userInput)
                Button("SEND", action: sendUserInput)
                Button("Cancel", role: .cancel, action: {})
                Button("Delete", role: .destructive, action: {})

            } message: {
                Text("Please give us feedback.")
            }

The result:

Show multiple alerts in the same view

There are a few ways to show different alerts in a view and in the following examples I will show you two ways.

The quick way

I named this approach “The quick way” because the most straightforward way is to simply add one more button and one more .alert modifier:

struct AlertContent: View {
    @State private var isShowingAlertOne = false
    @State private var isShowingAlertTwo = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isShowingAlertOne = true
            }) {
                Text("Show alert one")
            }
            .alert(isPresented: $isShowingAlertOne) {
                Alert(title: Text("Alert one"), message: Text("This is alert one"), dismissButton: .cancel())
            }
            
            Button(action: {
                self.isShowingAlertTwo = true
            }) {
                Text("Show alert two")
            }
            
            .alert(isPresented: $isShowingAlertTwo) {
                Alert(title: Text("Alert two"), message: Text("This is alert two"), dismissButton: .cancel())
            }
            
        }
    }
}

The result:

This is a great way if you have two alerts, but as soon as you get over two it can become a bit much code in your view.

The enum way

This approach is called “The enum way” because we create an enum class and define what alert types we want:

enum AlertType {
    case AlertOne, AlertTwo
}

struct AlertContent: View {
    @State private var isShowingAlert = false
    @State private var alertType: AlertType = .AlertOne
    
    var body: some View {
        VStack {
            Button(action: {
                alertType = .AlertOne
                self.isShowingAlert = true
                
            }) {
                Text("Show alert one")
            }
            
            Button(action: {
                alertType = .AlertTwo
                self.isShowingAlert = true
            }) {
                Text("Show alert two")
            }
        }
        .alert(isPresented: $isShowingAlert) {
            switch alertType {
            case .AlertOne:
                return Alert(title: Text("Alert one"), message: Text("This is alert one"), dismissButton: .cancel())
            case .AlertTwo:
                return Alert(title: Text("Alert two"), message: Text("This is alert two"), dismissButton: .cancel())
            }
        }
    }
}

The result:

As you can see the result is the same, but the second approach with enums is a bit easier to maintain and it is easy to create more alerts in the same view without it becoming cluttered.

Conclusion

SwiftUI Alerts is a powerful tool in your iOS app development arsenal. With their ability to communicate information, capture user actions, and gather input, alerts greatly enhance the user experience. By following the techniques outlined in this article, you’ll be well on your way to creating engaging and interactive apps that keep your users informed and in control. So, start harnessing the power of SwiftUI Alerts today and take your app’s user experience to the next level.

Remember, effective user interaction is the key to success, and SwiftUI Alerts are here to help you achieve just that!

Scroll to Top