DEV Community

Cover image for 5 ButtonStyles in SwiftUI
D. Prameswara
D. Prameswara

Posted on • Originally published at swift.my.id on

5 ButtonStyles in SwiftUI

Button is one of the Views provided by SwiftUI by default and comes equipped with modifiers that make it easy to customize. You can adjust its size, color, and style. However, did you know that SwiftUI already provides 5 button styles by default that make it very easy to control the button's appearance?

The 5 default button styles provided by SwiftUI are as follows:

  • Default/Automatic (.automatic)
  • Borderless (.borderless)
  • Plain (.plain)
  • Bordered (.bordered)
  • BorderedProminent (.borderedProminent)

To determine the style of the button you desire, simply add the buttonStyle modifier with one of the values mentioned above.

func buttonStyle<S>(_ style: S) -> some View where S : ButtonStyle
Enter fullscreen mode Exit fullscreen mode

#Default/Automatic

The default style is the style chosen by SwiftUI to display a Button if you don't configure anything. If you want to use this default appearance, you can simply add the buttonStyle modifier with the value .automatic."

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Automatic Button tanpa modifier"){

            }

            Divider()

            Button("Automatic Button dengan modifier"){

            }
                .buttonStyle(.automatic)
        }
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

5 ButtonStyles in SwiftUI

#Borderless

The borderless style is a button style without borders. In fact, this is the button style that is displayed when you choose the buttonStyle modifier with the value .automatic. It's a simple style and is suitable for creating button appearances in HTML similar to anchors.

To use the borderless style, you can use the modifier with the value .borderless or BorderlessButtonStyle()."

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderless Button"){

            }
                .buttonStyle(.borderless)

            Divider()

            Button("Borderless Button"){

            }
                .buttonStyle(BorderlessButtonStyle())

        }
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

5 ButtonStyles in SwiftUI

#Plain

The plain style is a borderless button style, but with a label color that matches the text. If the borderless style in HTML makes a button look like an anchor, plain style makes the button identical to the text but clickable.

To use the plain style, you can use the modifier with the value .plain or PlainButtonStyle().

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Plain Button"){

            }
                .buttonStyle(.plain)

            Divider()

            Button("Plain Button"){

            }
                .buttonStyle(PlainButtonStyle())
        }
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

5 ButtonStyles in SwiftUI

#Bordered

The bordered style is the opposite of borderless. With this style, the button will look like a typical button, with a background and border, but with a flat feel. If you want to make a button with this style, than use this modifier with the value .bordered or BorderedButtonStyle() .

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderer Button"){

            }
                .buttonStyle(.bordered)

            Divider()

            Button("Bordered Button"){

            }
                .buttonStyle(BorderedButtonStyle())
        }
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

5 ButtonStyles in SwiftUI

#BorderedProminent

Bordered prominent is a style that displays a button like a commonly recognized button for users. It has a primary background and white text. If you want to make a button with this style, than use the modifier with the value .borderedProminent or BorderedProminentButtonStyle()

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderer Button"){

            }
                .buttonStyle(.borderedProminent)

            Divider()

            Button("Bordered Button"){

            }
                .buttonStyle(BorderedProminentButtonStyle())
        }
        .padding()
    }
}
Enter fullscreen mode Exit fullscreen mode

5 ButtonStyles in SwiftUI

And here is an image of the buttons with each of the styles mentioned above.

5 ButtonStyles in SwiftUI

So, these are the 5 button styles that you can use to customize the appearance of a Button in SwiftUI. Feel free to choose the one that suits your needs.

Good luck, and please trying them out, and I hope this little information is helpful.

Top comments (0)