Buttons

Last updated on 18 Oct 2024.

Written by Jia Chen.

Buttons

Last updated on 18 Oct 2024.

Written by Jia Chen.

Buttons

Last updated on 18 Oct 2024.

Written by Jia Chen.

Scroll Down

On this page

On this page

Creating a Button

To create a button, you need to supply it with a Label—the content of the button, and an Action—the code executed when the button is tapped.

struct ContentView: View {
    var body: some View {
        Button {
            // Perform an action 
            print("Why did you click me?")
        } label: {
            // The button's label, what's presented
            Text("Click Me!")
        }
    }
}

SwiftUI provides several different ways to create a Button. Each approach provides a different way for you to customize the Action and Label, providing differing amounts of customizability.

Text Label

This is the simplest implementation of a button. It allows you to quickly create a simple button, but does not afford much customization.

Button("Click Me!") {
    // Perform an action
}

Custom Label

You can supply a custom label using this Button initializer. This implementation gives you more control over the appearance of the button.

Button {
    // Perform an action
} label: {
    // The button's label, what's presented
    Text("Click Me!")
        .padding()
        .background(.red)
        .foregroundStyle(.white)
}

Image Labels

You can also supply an image or SF Symbol to quickly create a customized button with an image.

Button("Click Me!", systemImage: "cursorarrow") {
    // Perform an action
}

Button Styles

You can customize a button's appearance with the buttonStyle modifier.

VStack {
    HStack {
        Button("Sign Up") {
            ...
        }
        .buttonStyle(.bordered)
    
        Button("Sign Up") {
            ...
        }
        .buttonStyle(.borderedProminent)
    }
    HStack {
        Button("Sign Up") {
            ...
        }
        .buttonStyle(.borderless)
    
        Button("Sign Up") {
            ...
        }
        .buttonStyle(.plain)
    }
}

Cascading Styles

You can apply a style to a parent view and have its child views reflect the style.

HStack {
    Button("Sign Up") {
        ...
    }
    
    Button("Register") {
        ...
    }
}
.buttonStyle(.bordered)

Button Roles

You can supply your button with the role parameter to characterize your Button's purpose. For example, for an irreversible action like deleting data, you may choose to assign it a .destructive role. Refer to the Human Interface Guidelines for guidance on the various button roles.

Button("Delete All Data", role: .destructive) {
}
Button(role: .destructive) {
    
} label: {
    Text("Delete all data")
}

By default, a .destructive role will give the icon a red tint to draw attention to the action.

Refactoring Actions

You can clean up your code by refactoring actions into their own functions.

struct ContentView: View {
    var body: some View {
        Button("Launch Nuke",
               role: .destructive,
               action: destroyCivilization)
    }

    // Declare a separate function to handle the Button's action
    func destroyCivilization() {
        // Write any code needed here
    }
}

This works with all Action closures, giving you a way to quickly and easily clean up complex views.

Button(action: destroyCivilization) {
    Text("Launch Nuke")
}

View Builder & Logical Code

SwiftUI provides various spaces for View Builder and Logical Code.

  • View Builder code is code that describes how your SwiftUI view looks like. This is where you can use your Text, Button, and other views.

  • Logical code is traditional Swift code like if-else statements, setting variables, loops, etc.

struct ContentView: View {
    var body: some View {
        // View Builder Code
        Button("Click Me!") {
            // Logical Code
        }

        Button {
            // Logical Code
        } label: {
            // View Builder Code
            Text("Click Me!")
        }
    }
}

© 2024 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.

© 2024 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.

© 2024 Tinkertanker Pte Ltd / Swift Accelerator. All rights reserved.