Alert

macOS 13.3+

Asks people to confirm an action or acknowledge important information with SwiftUI's native alert.

Native alert asking to delete a project
import SwiftUIstruct AlertUsageExample: View {    @State private var isPresented = false    var body: some View {        FLXButton("Delete project", role: .destructive) {            isPresented = true        }        .alert("Delete Q3 roadmap?", isPresented: $isPresented) {            Button("Delete", role: .destructive) {}            Button("Cancel", role: .cancel) {}        } message: {            Text("This permanently deletes the project and its 12 files.")        }    }}

Usage

The system draws alerts, with their own material, layout, and accessibility, so use .alert directly and open it from FLX components:

FLXButton("Delete project", role: .destructive) {    isPresented = true}.alert("Delete Q3 roadmap?", isPresented: $isPresented) {    Button("Delete", role: .destructive) {}    Button("Cancel", role: .cancel) {}} message: {    Text("This permanently deletes the project and its 12 files.")}

Inside an alert, use Button, not FLXButton. The system draws the buttons from their titles and roles and ignores button styles.

Buttons

A .destructive role paints the button red. A .cancel role marks the button that dismisses without acting, and the system places it for you. Every button dismisses the alert after its action runs.

Use .keyboardShortcut(.defaultAction) to mark the button people most likely want. The alert fills it with the app's AccentColor from the asset catalog, not with the theme, and Return chooses it. Set AccentColor to your theme's tint, as in Installation.

Examples

Text field

Add a TextField before the buttons to ask for a short value, such as a name.

Native alert with a text field to rename a project

Error

Pass a LocalizedError and the alert uses its errorDescription as the title.

Native alert showing an upload error

Confirmation dialog

Use .confirmationDialog to offer a few choices about an action someone started. On macOS, a confirmation dialog appears as an alert attached to the window.

Native confirmation dialog with sign-out choices
import SwiftUIstruct AlertConfirmationDialogExample: View {    @State private var isPresented = false    var body: some View {        FLXButton("Sign out", variant: .secondary) {            isPresented = true        }        .confirmationDialog("Sign out?", isPresented: $isPresented, titleVisibility: .visible) {            Button("Sign Out of This Device") {}            Button("Sign Out of All Devices", role: .destructive) {}            Button("Cancel", role: .cancel) {}        } message: {            Text("You'll need to sign in again to sync your projects.")        }    }}

Alert, dialog, or sheet

  • Use an alert for important information that needs a response, such as confirming a destructive action or reporting an error.
  • Use a confirmation dialog when an action has a few possible outcomes.
  • Use a Sheet when you need more than a short message and a text field.

For more information about alerts and confirmation dialogs, see the Apple documentation.