New in SwiftUI 3: Button Style in SwiftUI 3 and iOS 15

DevTechie Inc
Apr 6, 2022

ButtonStyle modifier has been around in SwiftUI since beginning but with the release of iOS 15, SwiftUI team at Apple decided to optimize it further and made a few more style available out of the box.

In this article, we will look at new signature for buttonStyle and newly introduced styles, so let’s get started.

We will create a simple example with buttons inside a VStack

struct SimpleButtonStyleExample: View {
    var body: some View {
        VStack (spacing: 20) {
            Button("DevTechie") {}
            .buttonStyle(.plain)
            
            Button("DevTechie") {}
            .buttonStyle(.automatic)
            
            Button("DevTechie") {}
            .buttonStyle(.bordered)
            
            Button("DevTechie") {}
            .buttonStyle(.borderedProminent)
            
            Button("DevTechie") {}
            .buttonStyle(.borderless)
            
        }
    }
}
Take a note on bold lines in code above. These are newly introduced styles in iOS 15. Before this only two buttonStyles were available (PlainButtonStyle, BorderlessButtonStyle). Also take a note that instead of creating buttonStyle object like: BorderlessButtonStyle() you can specify style with . operator which will make it like: .borderless

This is how our view looks like:

We also have ability to apply tint to buttons to match app theme as shown below:

struct SimpleButtonStyleExample: View {
    var body: some View {
        VStack (spacing: 20) {
            Button("DevTechie") {}
            .buttonStyle(.plain)
            
            Button("DevTechie") {}
            .buttonStyle(.automatic)
            
            Button("DevTechie") {}
            .buttonStyle(.bordered)
            
            Button("DevTechie") {}
            .buttonStyle(.borderedProminent)
            
            Button("DevTechie") {}
            .buttonStyle(.borderless)
            
        }
        .tint(.orange)
    }
}
Note that tint on plain button style will not have any effect.

With that, we have reached the end of this article. Thank you once again for reading, if you liked it, don’t forget to subscribe our newsletter.