SwiftUI alert buttons order issue

Question

iandreyeu OP

Created Dec ’23

Replies 1

Boosts 0

Views 1k

Participants 2

I am facing a problem with SwiftUI alert API.

According to Apple Figma (https://www.figma.com/community/file/1248375255495415511/apple-design-resources-ios-17-and-ipados-17) it is possible to put a button with role "cancel" (the one with fatter text) to the right side of the alert. I can also see this behavior when requesting otp for authentication on apple forums: my iPhone shows an alert with "Accept" button in fatter font and placed to the right. But when I put things into the code, a button with "cancel" role get's pushed to the left.

Code below

struct ContentView: View {
    @State
    private var isAlertPresented = false
    
    var body: some View {
        Button(
            action: {
                isAlertPresented = true
            },
            label: {
                Text("Show alert")
            }
        )
        .frame(alignment: .center)
        .alert(
            "Test alert",
            isPresented: $isAlertPresented,
            actions: {
                Button("Default role", action: { })
                Button("Cancel role", role: .cancel, action: { })
            },
            message: {
                Text("Test message")
            }
        )
    }
}

results in

Screenshot 2023-12-07 at 11.08.14.png

even though the button with "cancel" role is put second in the code, when running it becomes first.

Now API docs claim

The system may reorder the buttons based on their role and prominence.

however, folks at Apple forced button position somehow, and Figma claims what I need should be possible (which our designers use, so their posture is "Apple claims this in Figma, so it's possible, make it happen").

How that can be done exactly? Thanks

Boost

Answer 1

GreatOm OP

Dec ’23

How about using no role at all? Without a role there is no reason for the OS to rearrange the buttons. Something like

        .alert(
            "Test alert",
            isPresented: $isAlertPresented,
            actions: {
                Button("Default role", action: { })
                Button("Cancel role", role: .none, action: {
                    isAlertPresented = false
                })
            },
            message: {
                Text("Test message")
            }

0