5 ButtonStyles in SwiftUI
Tags: swiftui, swift, ios
Published: 2023-09-23 08:03:19

---
title: 5 ButtonStyles in SwiftUI
published: true
date: 2023-01-15 07:12:35 UTC
tags: SwiftUI,Swift,IOS
cover_image: https://swift.my.id/content/images/2023/01/Screenshot-2023-01-15-at-17.42.05.jpg
canonical_url: https://swift.my.id/5-buttonstyles-di-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.

```swift
func buttonStyle<S>(_ style: S) -> some View where S : ButtonStyle
```

## #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`."

```swift
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Automatic Button tanpa modifier"){
                
            }
            
            Divider()
            
            Button("Automatic Button dengan modifier"){
                
            }
                .buttonStyle(.automatic)
        }
        .padding()
    }
}
```

![5 ButtonStyles in SwiftUI](https://swift.my.id/content/images/2023/01/image-3.png)

## #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()`."

```swift
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderless Button"){
                
            }
                .buttonStyle(.borderless)
            
            Divider()
            
            Button("Borderless Button"){
                
            }
                .buttonStyle(BorderlessButtonStyle())

        }
        .padding()
    }
}
```

![5 ButtonStyles in SwiftUI](https://swift.my.id/content/images/2023/01/image-5.png)

## #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()`.

```swift
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Plain Button"){
                
            }
                .buttonStyle(.plain)
            
            Divider()
            
            Button("Plain Button"){
                
            }
                .buttonStyle(PlainButtonStyle())
        }
        .padding()
    }
}
```

![5 ButtonStyles in SwiftUI](https://swift.my.id/content/images/2023/01/image-6.png)

## #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()` .

```swift
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderer Button"){
                
            }
                .buttonStyle(.bordered)
            
            Divider()
            
            Button("Bordered Button"){
                
            }
                .buttonStyle(BorderedButtonStyle())
        }
        .padding()
    }
}
```

![5 ButtonStyles in SwiftUI](https://swift.my.id/content/images/2023/01/image-7.png)

## #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()`

```swift
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Borderer Button"){
                
            }
                .buttonStyle(.borderedProminent)
            
            Divider()
            
            Button("Bordered Button"){
                
            }
                .buttonStyle(BorderedProminentButtonStyle())
        }
        .padding()
    }
}
```

![5 ButtonStyles in SwiftUI](https://swift.my.id/content/images/2023/01/image-8.png)

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

![5 ButtonStyles in SwiftUI](https://swift.my.id/content/images/2023/01/image-10.png)

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.

{% github https://github.com/meshwara/SwiftUI-Button-Styles %}

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