How to disable button in SwiftUI

In your SwiftUI applications, you will be using Button view very often. Simple user inputs are build using this interactive control. But in this article, you will learn how to make buttons disabled.

Think about a situation as follow - you have three different options, but some of them are only active when the toggle is true. You can hide inactive options using the if statement, but this will be counterintuitive for users. The "Don't make me think" principle assumes that users should know what's going on and not be surprised by UI. You can achieve it by just disabling that options.

To disable a button, you should use the disabled view modifier. It takes bool parameter, which for example, can be taken from the state.

@State private var disabled = true

var body: some View {
    Button("Press me", action: {})
        .disabled(disabled)
}

You can use the disabled modifier on a view above buttons (VStack, for example). That way, you will apply it to all buttons (or other controls below).

VStack {
    Button("Press me 1", action: {})
    Button("Press me 2", action: {})
    Button("Press me 3", action: {})
}
.disabled(true)

Note: According to the documentation, disabled from view higher in scope takes precedence on disabled from lower views. But my experiments (you can find a link to the project below) show that priority has the one that its parameter is set to true and order is not important.

Want to test it yourself? Download this Xcode Project.