You can use one of predefined styles using buttonStyle
modifier
Button("Plain", action: { print("Button clicked") }) .buttonStyle(PlainButtonStyle())
With following snippet we can add gradient to a button
Button(action: { print("Button clicked") }) { Image(systemName: "square.and.arrow.up") .font(.title) Text("Action") .fontWeight(.semibold) .font(.title) } .frame(width: 200, height: 85, alignment: .center) .foregroundColor(.white) .background(LinearGradient(gradient: Gradient(colors: [.green, .orange]), startPoint: .leading, endPoint:.trailing)) .cornerRadius(40)
You can also make your own styles. Create a style that conforms to the ButtonStyle
protocol to add a custom appearance with standard interaction behavior. It will help in the reusability of code.
Let’s create a custom ButtonStyle
with the help of some modifiers:
struct ContentView: View { var body: some View { Button("Action") { print("Button clicked") } .buttonStyle(GreenButton()) } } struct GreenButton: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .padding() .background(Color(red: 0.2, green: 0.4, blue: 0.0)) .foregroundColor(.white) .clipShape(Circle()) } }