What is Button Role in SwiftUI

What is ButtonRole in SwiftUI

In iOS 15, SwiftUI got a new struct, ButtonRole, that means to use alongside with a button.

ButtonRole is a value that describes the purpose of a button.

There are two roles you can choose.

1. destructive: Use this role for a button that deletes user data, or performs an irreversible operation.
2. cancel: A role that indicates a button that cancels an operation.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How does ButtonRole affect a button

The system uses the button's role to improve styling and usability based on the context.

From my observation, it can affect a button in two ways.

1. Appearance
2. Position

Appearance

The system usually changes the styling of a destructive button to be more prominent. Since it uses to perform an irreversible operation, it usually styled in red color to convey the sense of danger.

The followings are examples of button roles in different contexts.

Buttons with no role, cancel role, and destructive role in VStack.

VStack {
    Button("Default", action: {})
    Button("Cancel", role: .cancel, action: {})
    Button("Delete", role: .destructive, action: {})
}

Buttons use as Alert actions.

.alert("Alert", isPresented: $isPresented) {
    Button("Default", action: {})
    Button("Cancel", role: .cancel, action: {})
    Button("Delete", role: .destructive, action: {})
}

Buttons use as Swipe actions for a List row.

List {
    Text("Item 1")
        .swipeActions {
            Button("Default", action: {})
            Button("Cancel", role: .cancel, action: {})
            Button("Delete", role: .destructive, action: {})
        }
}

Position

In some contexts, the system also uses the button's role to determine the button position.

For example, iOS usually positions the cancel operation at the bottom for Alert and Confirmation Dialog.

Knowing that the button is a cancel button allows the system to adjust its position. This improves consistency and usability.

Alert

.alert("Alert", isPresented: $isPresented) {
    Button("Default", action: {})
    Button("Cancel", role: .cancel, action: {})
    Button("Delete", role: .destructive, action: {})
}

As you can see, in the code, we put the cancel button in the middle. But the system puts it at the bottom when presented as alert actions.

Confirmation Dialog

.confirmationDialog("Confirmation Dialog", isPresented: $isPresented, actions: {
    Button("Default", action: {})
    Button("Cancel", role: .cancel, action: {})
    Button("Delete", role: .destructive, action: {})
})

The same principle holds for .confirmationDialog. The cancel button gets pushed to the bottom of a confirmation dialog.