How to Show an Alert in SwiftUI

Use an alert in SwiftUI when your app needs important user confirmation, warnings, errors, or destructive action checks. Alerts are perfect for delete confirmations, failed network messages, and success feedback.

What you’ll build or solve

You’ll learn how to show an alert in SwiftUI with @State, boolean bindings, and action buttons. You’ll also know when sheets or confirmation dialogs are a better fit.

When this approach works best

This approach is the right choice when the message is short, blocking, and needs an immediate decision or acknowledgment.

Common real-world scenarios include:

• Delete confirmations
• Failed login warnings
• Payment errors
• Logout prompts
• Save success feedback

This is a bad idea when the UI needs a multi-step interaction or large custom content.

Prerequisites

You only need:

• Basic SwiftUI views
• @State
• Familiarity with buttons and bindings

Step-by-step instructions

Step 1: Add state to control the alert

Start with a boolean flag.

import SwiftUI

struct DeleteView: View {
    @State private var showAlert = false

    var body: some View {
        Button("Delete Account") {
            showAlert = true
        }
    }
}

This creates the trigger state.

Step 2: Attach the .alert() modifier

Use the boolean binding.

.alert("Are you sure?", isPresented: $showAlert) {
    Button("Delete", role: .destructive) {
        print("Deleted")
    }

    Button("Cancel", role: .cancel) {}
}

This shows a native confirmation alert.

Step 3: Add a message body

Include extra context when needed.

.alert("Payment failed", isPresented: $showAlert) {
    Button("OK", role: .cancel) {}
} message: {
    Text("Please check your card details and try again.")
}

This improves clarity without building a custom modal.

What to look for:

• Use @State for alert visibility
• Bind with $showAlert
• Great for confirmations and warnings
• Use destructive roles when appropriate
• Keep alert copy short

Examples you can copy

Delete confirmation

Button("Delete", role: .destructive)

Simple error

.alert("Login failed", isPresented: $showAlert)

Success message

.alert("Saved", isPresented: $showSuccess)

Common mistakes and how to fix them

Mistake 1: Forgetting the state binding

What the reader might do:

.alert("Error", isPresented: showAlert)

Why it breaks: alerts require a binding.

Corrected approach:

Use $showAlert.

Mistake 2: Using alerts for large forms

What the reader might do:

Try to collect input inside an alert.

Why it breaks: alerts are meant for short decisions.

Corrected approach:

Use sheets or custom modals.

Mistake 3: Overusing alerts for non-critical info

What the reader might do:

Show alerts for every small success event.

Why it breaks: the UX becomes noisy.

Corrected approach:

Use inline banners or toasts.

Troubleshooting

If the alert never appears, verify the state toggles to true.

If buttons do nothing, confirm the actions are inside the alert closure.

If the UI needs custom layout, switch to a sheet.

If the alert feels repetitive, use lighter inline feedback.

Quick recap

• Use @State to control alerts
• Bind visibility with $
• Great for confirmations and errors
• Use destructive and cancel roles
• Prefer sheets for complex interactions