SwiftUI – Button with text and image in a certain style

June 24, 2022

I created a button style control just using text and certain modifiers on it. However I wish to have an image besides it, hence I might will have to convert it to actual button unless there is a way to add image besides text element.

What I want is 2nd ‘Cancel’ with image besides it. Here is the code for 2nd ‘Cancel’ button. It’s just a Text element with modifiers, so I might not be able to add image directly to it.

Text("Cancel")
    .font(.subheadline)
    .padding()
    .frame(width: 100, height: 20)
    .background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255))
    .foregroundColor(.white)
    .padding(5)
    .border(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255), width: 5)
    .cornerRadius(15)

I tried using Button element to achieve it, but it looks way bigger.. first ‘Cancel’ button is the output of what I tried. Here is the code:

Button(action: {}) {
    HStack {
        Text("Cancel").font(.subheadline).foregroundColor(.white)
        Image("cross-cancel").foregroundColor(.white)
    }
}.padding().background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255)).cornerRadius(15)

How do I get 2nd ‘Cancel’ with image besides it?

>Solution :

Put them into HStack and remove width hardcoding for frame, like

HStack {
    Text("Cancel")
    Image(systemName: "xmark.circle")
}
.font(.subheadline)
.padding()
.frame(height: 20)
.background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255))
.foregroundColor(.white)
.padding(5)
.border(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255), width: 5)
.cornerRadius(15)

Tested with Xcode 13.4 / iOS 15.5