How to set image to button in SwiftUI? - button

Question

I want to add a button with an image (on the left), as follows:
Probably, it seems to be similar to setImage(_:for:) when it comes to UIButton.
What I have done so far is:
Button(action: {}) {
Text("Add To Cart")
.foregroundColor(.black)
.padding(.all, 10.0)
}
.background(Color.gray)
.cornerRadius(5.0)
And the result is pretty close to the required one:
However, I couldn't find any property/method in SwiftUI Button related to setting an image.
How to resolve it?

Answer 1

You could implement it as:
Button(action: {}) {
HStack(alignment: .center, spacing: 5.0) {
Image("cart")
.padding(.leading, 10.0)
Text("Add to Cart")
.foregroundColor(.black)
.padding(.all, 10.0)
}
}
.background(Color.gray)
.cornerRadius(5.0)
Passing HStack instead of Text would do the trick.
To clarify, adding an image next to the button label is not directly related to the button anymore! When creating a button using init(action:label:) initializer, we are passing () -> Label as the second parameter; If you trace the type of Label, you'll see that it is basically a View, so you are not forced to return a Text type for it (as mentioned in the question's code snippet).
Obviously, you could add the image to the right of the label by adding Text before the Image. Also, if you are aiming to add the text on top of the image (or vice-versa), you could simply replace the HStack with a VStack.
Furthermore, more reusable code
You could make your code to be more reusable by creating a custom body View for the button. Also, you could create a custom ViewModifier:
import SwiftUI
// Custom View
struct CustomButtonBody: View {
private var iconName: String
private var title: String
init(iconName: String = "cart", title: String) {
self.iconName = iconName
self.title = title
}
var body: some View {
HStack(alignment: .center, spacing: 5.0) {
Image(iconName)
.padding(.leading, 10.0)
Text(title)
.foregroundColor(.black)
.padding(.all, 10.0)
}
}
}
// Custom Modifier
struct CustomButtonModifier: ViewModifier {
func body(content: Content) -> some View {
return content
.background(Color.gray)
.cornerRadius(5.0)
}
}
thus:
Button(action: {}) {
CustomButtonBody(title: "Add to Cart")
}
.modifier(CustomButtonModifier())

Answer 2

Why don't you just
Button(action: {}) {
Label("Add to cart", systemImage: "cart")
}