New in SwiftUI 3: Button border, tint, and role in SwiftUI 3 and iOS 15

Several new additions have been made to button control under SwiftUI 3 and iOS 15 release and in this article, we will be looking at four major changes that will make buttons look better out of the box.

BorderShape:

Button’s border can be created by adding a background modifier to the button but in iOS 15 there is another way to create border. BorderShape is a new modifier added in iOS 15 to add border to Button controls in SwiftUI.

struct ButtonBorderExample: View {
    var body: some View {
        VStack {
            Button("Just bordered no shape") {}
            .buttonStyle(.bordered)
            
            Button("Just borderedProminent no shape") {}
            .buttonStyle(.borderedProminent)
            
            Button("borderedProminent and automatic shape") {}
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.automatic)
            
            Button("borderedProminent and roundedRectangle shape") {}
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.roundedRectangle)
            
            Button("borderedProminent and roundedRectangle(20)") {}
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.roundedRectangle(radius: 20))
            
            Button("borderedProminent and capsule") {}
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.capsule)
        }
    }
}