CODEWITHSUNDEEP
buttonswiftui
Ahmad F
Ahmad F

Reputation: 31645

How to set image to button in SwiftUI?

I want to add a button with an image (on the left), as follows:

enter image description here

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:

enter image description here

However, I couldn't find any property/method in SwiftUI Button related to setting an image.

How to resolve it?

Upvotes: 0

Views: 9076

Answers (2)

Paul B
Paul B

Reputation: 5115

Why don't you just

Button(action: {}) {
    Label("Add to cart", systemImage: "cart")
  }

Upvotes: 1

Ahmad F
Ahmad F

Reputation: 31645

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

Upvotes: 5

Related Questions