Do I Need a Stylish Button in SwiftUI?

While creating or design an APP one control is always required for an action or event. either saving the data or dismissing the message. Every Programming or UI Based Programming language have their own approach to design Button or Stylish Button in SwiftUI.

In SwiftUI creating three buttons: Delete, Edit, and Share that all have the same button style

SwiftUI provides a protocol called ButtonStyle for you to create your own button style. To create a reusable style for our buttons, we create a new struct called GradientBackgroundStyle that conforms to the ButtonStyle protocol.

The protocol requires us to provide the implementation of the makeBody function that accepts a parameter configuration. The configuration parameter includes a label property that you can apply the modifiers to change the button’s style.

You can also determine if the button is pressed by accessing the isPressed properties of the configuration. This allows you to alter the style of the button when the user taps on it.

In Stylish Button in SwiftUI Few Points to remember HStack, ButtonStyle, GradientBackgroundStyle, configuration, makeBody, label, there is a

Creating a New Project with SwiftUI enabled

create a simple button using SwiftUI. First, create a new project using the Single View Application template. Type the name of the project. I set it to SwiftUIButton but you’re free to use any other name. All you need to ensure is to check the Use SwiftUI option.

Once you save the project, Xcode should load the ContentView.swift file and display a preview in the design canvas. In case the preview is not displayed, you can click the Resume button in the canvas.

Creating a Simple Button with SwiftUI

It’s very easy to create a button using SwiftUI. Basically, you can use the code snippet below to create a button:

struct ContentView: View {
 
    var body: some View {
 
        VStack {
 
            Button(action: {
                print("Share tapped!")
            }) {
                HStack {
                    Image(systemName: "square.and.arrow.up")
                        .font(.title)
                    Text("Share")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
 
            Button(action: {
                print("Edit tapped!")
            }) {
                HStack {
                    Image(systemName: "square.and.pencil")
                        .font(.title)
                    Text("Edit")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
 
            Button(action: {
                print("Delete tapped!")
            }) {
                HStack {
                    Image(systemName: "trash")
                        .font(.title)
                    Text("Delete")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
                .padding(.horizontal, 20)
            }
 
        }
    }
}

struct GradientBackgroundStyle: ButtonStyle {
 
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .foregroundColor(.white)
            .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
            .cornerRadius(40)
            .padding(.horizontal, 20)
    }
}

Button(action: {
    print("Delete tapped!")
}) {
    HStack {
        Image(systemName: "trash")
            .font(.title)
        Text("Delete")
            .fontWeight(.semibold)
            .font(.title)
    }
}
.buttonStyle(GradientBackgroundStyle())

SwiftUI having some good features to design or decorate buttons like the Stylish Button in SwiftUI.

Happy Coding 🙂