Learn

with Swift Accelerator

Learn

with Swift Accelerator

Buttons

Last updated on 18 Oct 2024.

Written by Jia Chen.

Sample Project

Playgrounds on iPad

Playgrounds on Mac

Xcode

Buttons

Last updated on 18 Oct 2024.

Written by Jia Chen.

Sample Project

Playgrounds on iPad

Playgrounds on Mac

Xcode

Buttons

Last updated on 18 Oct 2024.

Written by Jia Chen.

Sample Project

Playgrounds on iPad

Playgrounds on Mac

Xcode

Scroll Down

Getting Started

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
}

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!")
        }
    }
}

Going Further

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")
}

Components

Buttons

Components

Buttons

Components

Buttons

On this page

On this page

Getting Started

Creating a Button

Text Label

Custom Label

Image Labels

View Builder & Logical Code

Going Further

Button Styles

Cascading Styles

Button Roles

Refactoring Actions

See Also

State Variables

State variables are used to provide interactivity in SwiftUI.

Toggles

Toggles are controls that allow the user to switch between on and off states.

SwiftUI Controls

A collection of articles and examples on SwiftUI Controls.