SwiftUI - How to style buttons
Tags: swift, mobile, codenewbie, ios
Published: 2021-11-19 14:30:05

#<h1> Hola Mundo! </h1>
<Enter>
Allow me to start with a little bit of context, I'm new at Swift...one month old new at it 🍼👶🏻. And although I love it, it has been a challenge. 

Now here it is, first timer Silvia adding her first `Button` just to find out that the native styling is nonexistent. Is not an exaggeration , loot at it 😞 

![Screenshot of a native SwiftUI button, white background, blue letters no further styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riaclx94fbkhlv5c78pj.png)
 
I spent at least one hour reading and trying some options until I came with a button that I loved 🥰  - and that you will find later on. So I decided to do this little post with some SwiftUI button styles begginer tips for you to learn, play or use in your own project ✨📱

Let's get on it! 🚀 
___
###Tip #1 ☝️  
<Enter>
Add this line `.buttonStyle(PlainButtonStyle())` after your `Button()` declaration in order to remove any default style.

As you have seen in the previous screenshot, the native button gives your text a "link" style that you may not like. With this the text colour will reset at your app default.

___
###Tip #2 ✌️  
<Enter>
If the label of your button is a text you can initialize it  directly writting the String ✏️ 
```swift
Button("I'm a button",
               action: {})
```
___
###Tip #3 ✨  
<Enter>
Use the [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/) to add an extra something to your buttons. This native option is not only easy to use but it is also fully customisable and VoiceOver friendly ❤️
![Screenshot of a button with an alarm symbol and the text "Remind me"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyqdsraflu7mixs16kjt.png)
```swift
Button(action: {
            print("Set up alarm")
        }){
            Image(systemName: "alarm")
                .accessibilityLabel("Alarm clock")
            Text("Remind me")
        }
```
___
###Tip #4 ⭕️  
<Enter>
Get to now `clipShape(_:style:)`. When styling your buttons clipShape makes everything easier as it allows you to shape your button in a predetermined figure.  Some of the styles accepted in the parameter are rectangle, circle, capsule, ellipse. 
![Rounded red button with a bell icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2cgtu1zkf3sad4z9sc0.png)
 
```swift
Button(action: {}){
            Image(systemName: "bell")
                .frame(width: 50, height: 50)
                .foregroundColor(Color.black)
                .background(Color.red)
                .clipShape(Circle())
        }.buttonStyle(PlainButtonStyle())
```
___
###Tip #5 🖐   
<Enter>
Use the protocole `PrimitiveButtonStyling` 🎨. This protocole uses a makeBody function with a configuration we could set. 

If we want to create our own CustomStyle, we must start creating a struct that adopts the protocole.

![Screenshot of purple button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jteynuhnmsipdxdbrgd.png)

```swift
struct CustomizedStyle: PrimiteButtonStyle {
    typealias Body = Button
    func makeBody(configuration: Configuration) -> some View {
        print(configuration.label)
        configuration.trigger()
        
        return Button(configuration)
            .background(Color.purple)
            .clipShape(RoundedRectangle(cornerRadius: 10))
            .foregroundColor(Color.white)
    }
}
```
Our struct will now hold a style that we could use through our app by adding `.buttonStyle(CustomizedStyle())` to any Button  declaration.
```swift
        VStack {
            Button(action: { print("Boom")
            })
            {
                HStack {
                Image(systemName: "bolt")
                Text("Kaboom")
                }
                .padding()
            }
        }.buttonStyle(CustomizedStyle())
```
___
###Tip #6 💁🏽   
<Enter>
There's another protocole you might want to put an eye on and is the `ButtonStyle`. I know it sounds pretty similar than the #5 and it actually is, however, with this protocole we can customize our button when pressed.
With that being said let's take our previous code and refactor it into the new protocole.

![Gif of button that changes colour when clicked](https://user-images.githubusercontent.com/81619759/142262609-09a9e135-640e-48ff-80d6-851472573116.gif)

```swift
struct CustomizeWithPressed: ButtonStyle {
    typealias Body = Button
    
    func makeBody(configuration: Self.Configuration) 
-> some View {
        if configuration.isPressed {
            return configuration
                .label
                .padding()
                .background(Color.orange)
                .foregroundColor(Color.white)
                .clipShape(RoundedRectangle(cornerRadius: 10))
        } else {
            return configuration
                .label
                .padding()
                .background(Color.purple)
                .foregroundColor(Color.white)
                .clipShape(RoundedRectangle(cornerRadius: 10))
        }
    }
}
```
As you can see we now have a conditional inside the makeBody function where we can apply any style we want according to the action. 
Finally we only have to call our new style into our button view.

```swift
Button("Chamaleon", action:{})
            .buttonStyle(CustomizeWithPressed())
``` 
___
###Bonus button 🎉   
<Enter>
I guess by now you are really over buttons but, remember then button I told you at the beggining? the culprit of this blog post?

Well I also want to share it because I really liked it, is a white clean classic oval button with a subtle shadow that actually is what draws the button and add up some depth to the view 😌
![Screenshot of minimalist button, oval shape, white background, subtle shadows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afqt18zjuskoiz55ft0t.png)
```swift
Button(action: {
            print("Your action function here")
        }){
            Text("Minimalist button")
        }
        //The actual styling
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.white)
                .shadow(color: .gray, radius: 2, x: 0, y: 2)
        )
        .buttonStyle(PlainButtonStyle())
``` 
 ___
###Take a look to the code! 👩‍💻 

All this buttons codes (and some other) are in [this simple repository](https://github.com/silviaespanagil/swiftUI-button-study), don't hesitate to clone or download it.