How to Create Button with Image in iOS SwiftUI

In this blog post, we will unravel one of the most engaging aspects of mobile app development in SwiftUI: Creating a button with an image. Buttons are a fundamental interactive component of any app, and adding images can greatly enhance their aesthetic appeal and user experience.

Let’s dive in to understand how you can easily create and customize buttons with images in SwiftUI.

Basics: Create a Button with an Image

In SwiftUI, creating a button with an image is made simple. All you need to do is use an Image view inside the Button view:

Button(action: {
    // Action to perform when button is tapped
}) {
    Image("buttonImage")
}

In this code snippet, "buttonImage" is the name of the image asset you have in your project’s asset catalog. When the button is tapped, the code inside the action closure will be executed.

Customize the Image

Images within buttons can be customized in the same way as any other SwiftUI image view. You can adjust the rendering mode, apply different frames, and add other modifiers:

Button(action: {
    // Action to perform when button is tapped
}) {
    Image("buttonImage")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 50, height: 50)
}

Here, the image is made resizable, its aspect ratio is set to fit the frame, and it’s given a size of 50×50 points.

Add Text to the Button

Sometimes, you might want to include both text and an image within a button. SwiftUI makes this a breeze with the use of HStack or VStack:

Button(action: {
    // Action to perform when button is tapped
}) {
    HStack {
        Image(systemName: "play.circle.fill")
        Text("Play")
    }
}

In this example, a system image and a text view saying “Play” are displayed horizontally within the button.

Creating a SwiftUI button with an image is a great way to make your app more interactive and user-friendly. With the ability to customize images and combine them with text, you have a world of possibilities to enhance your button designs. Mastering this essential skill will bring a whole new level of engagement to your SwiftUI apps.