Presenting an alert is one of the regularly used functionalities when developing apps. Using an alert, you are able to inform users about impossibilities, invalid input or anything else that requires an alert.

New to SwiftUI? Read my blog post with an introduction to SwiftUI.

Presenting an alert with SwiftUI works slightly different than you may used to with UIKit. Before we take a look at the code of presenting an alert, let’s take a look at the properties of an alert.

Properties of an alert

An alert contains a title, which is bold and required. Below the title, the message of the alert is displayed in normal font weight. Adding a message text to the alert is optional.

Alerts can contain two action buttons. When one action button is used, the initialiser of the alert will look like this code example below, where the use of the dismissButton is optional and will be replaced by a default dismiss button containing the text “Ok” if the value is nil.

Example of the initialiser:

init(title: Text, message: Text? = nil, dismissButton: Alert.Button? = nil)

Example of usage:

Alert(title: Text("This is a test"), message: Text("This is a test message!"))

It is also possible to show two buttons near each other. For that case, another initialiser is available containing a required primaryButton parameter and an optional secondaryButton parameter.

Example of the initialiser:

init(title: Text, message: Text? = nil, primaryButton: Alert.Button, secondaryButton: Alert.Button)

Example of usage:

Alert(
  title: Text("Are you sure?"),
  message: Text("Do you want to dismiss the view?"),
  primaryButton: .destructive(Text("Yes"), action: dismiss),
  secondaryButton: .cancel(Text("No"), action: doNothing)
)

Both the title and message are set like the first alert, but there are two additional properties set, which are the primaryButton and the secondaryButton. The value of those buttons is a button with the type Alert.Button.

There are three different styles for alert buttons:

  1. .default, which will show the label of the button in the default blue font type, which is used for normal actions.
  2. .destructive, which can be used to warn the user about a delete action or something related to that.
  3. .cancel, which looks like the default action, but the font weight is shown bold.
Example of an alert.
Button type for No is .cancel.
Button type for Yes is .destructive.

Presenting an alert with SwiftUI

Now we know what an alert consists of, let’s take a look how the alert is presented with SwiftUI.

To present an alert, we need to create a state property which is a boolean. By default, the boolean is false, which means the alert is not shown. Using a button action, we are able to set this property value true, which will result in an alert that is displayed in the app.

The .alert container on line 11 in the code example below is using the isPresented parameter for binding, so as soon as the showAlert value is changed, the isPresented parameter will be updated and show the alert if the value is set true.

struct ProductDetailView: View {
    
    @State var showAlert = false
    
    var body: some View {
        NavigationView {
            Button(action: {
                self.showAlert = true
            }, label: { Text("Press me to show the alert" )})
        }
        .alert(isPresented: $showAlert) {
            Alert(
                title: Text("Are you sure?"),
                message: Text("Do you want to dismiss the view?")
            )
        }
    }
}

Conclusion

Presenting an alert with SwiftUI is possible by adding an .alert container after the NavigationView. You are able to control the alert by defining a state boolean, which will bind to the isPresented parameter of the alert to control the presentation moment.

Download the demo project here.

Categories:SwiftUI