Dialog

Represent a Material UI styled dialog for user interaction.

Overview

The Dialog view presents modal content in a styled overlay, typically used for important alerts or user interactions requiring attention.

The dialog modifier allows you to present a Material Design styled alert dialog from any SwiftUI view. You can configure the dialog with a title, message, and actions, including primary and optional secondary buttons.

To use the dialog modifier, apply it to any View with the required parameters.

Modifiers

Present a simple dialog with a title and message.

dialog(
    isPresented: Binding<Bool>,
    titleKey: String,
    message: String
)

Present an dialog with a title, message, and a primary button.

dialog(
    isPresented: Binding<Bool>,
    titleKey: String,
    message: String,
    primaryActionKey: String,
    primaryAction: @escaping () -> Void
)

Present an dialog with a title, message, and both primary and secondary buttons.

dialog(
    isPresented: Binding<Bool>,
    titleKey: String,
    message: String,
    primaryActionKey: String,
    primaryAction: @escaping () -> Void,
    secondaryActionKey: String?,
    secondaryAction: (() -> Void)?
)

Parameters

Property	Description
isPresented	A Binding<Bool> to control the presentation of the dialog.
titleKey	A String representing the title of the dialog.
message	A String for the dialog message.
primaryActionKey	A String for the title of the primary action button.
primaryAction	A closure to execute when the primary button is tapped.
secondaryActionKey	An optional String for the title of the secondary action button.
secondaryAction	An optional closure to execute when the secondary button is tapped.

Example

Displays a basic dialog with a title and message.

@State private var showSimpleDialog = false

var body: some View {
    Container {
        Switch("Show Simple Dialog", isOn: $showSimpleDialog)
    }
    .dialog(
        isPresented: $showSimpleDialog,
        titleKey: "Simple Dialog",
        message: "This is a simple dialog with a title and message."
    )
}

Displays a dialog with a title, message, and a primary action button.

@State private var showPrimaryActionDialog = false

var body: some View {
    Container {
        Switch("Dialog with Primary Action", isOn: $showPrimaryActionDialog)
    }
    .dialog(
        isPresented: $showPrimaryActionDialog,
        titleKey: "Primary Action Dialog",
        message: "This dialog includes a primary action button.",
        primaryActionKey: "OK",
        primaryAction: {
            Void()
        }
    )
}

Displays a dialog with title, message, and both primary and secondary action buttons.

@State private var showFullDialog = false

var body: some View {
    Container {
        Switch("Show Full Dialog", isOn: $showFullDialog)
    }
    .dialog(
        isPresented: $showFullDialog,
        titleKey: "Full Dialog",
        message: "This dialog includes both primary and secondary action buttons.",
        primaryActionKey: "Confirm",
        primaryAction: {
            print("Primary action confirmed")
        },
        secondaryActionKey: "Cancel",
        secondaryAction: {
            Void()
        }
    )
}