Skip to content
DeveloperMemos

Adding an Image to UIButton.Configuration

iOS, UIButton, UIButton.Configuration, UIImage1 min read

UIButton is one of the most commonly used UI elements in iOS applications. It allows users to interact with your app by clicking or tapping on it. When you create a UIButton, you can customize its appearance by setting its properties like the background color, text, font, and many more. In iOS 15, Apple introduced a new way of creating buttons called UIButton.Configuration. With this new feature, you can easily create and customize buttons with fewer lines of code. In this article, we will discuss how to add an image to UIButton.Configuration.

To add an image to a UIButton.Configuration, you need to create a button with the "systemImage" symbol configuration, which allows you to add an image to the button. The first step is to create a new instance of UIButton with the configuration you want. Here is an example:

1let button = UIButton(type: .system)
2let config = UIImage.SymbolConfiguration(pointSize: 32)
3let image = UIImage(systemName: "heart.fill", withConfiguration: config)
4
5button.configuration = UIButton.Configuration.filled()
6button.configuration?.baseBackgroundColor = .systemRed
7button.configuration?.cornerStyle = .medium
8button.configuration?.image = image

In the code above, we first create a new instance of UIButton with the "system" button type. We then create a new instance of UIImage.SymbolConfiguration and set the point size to 32. We use the "systemName" parameter to specify the name of the system image we want to use. In this case, we use "heart.fill" to add a heart icon to the button.

We then set the configuration of the button to "filled", which sets the button style to a filled background. We also set the base background color to "systemRed" and the corner style to "medium". Finally, we set the image property of the configuration to the image we created earlier.

Once you have set the configuration of the button, you can add it to your view hierarchy and the image will be displayed on the button.

In addition to the "systemImage" symbol configuration, there are other configuration options that you can use to customize your buttons. For example, you can use the "plain" configuration to create a button with a plain background and no border. You can also use the "bordered" configuration to create a button with a border and a background color.

In conclusion, adding an image to a UIButton.Configuration in iOS 15 is a simple process. You can create a button with the "systemImage" symbol configuration and set the image property of the configuration to the image you want to use. With UIButton.Configuration, you can create and customize buttons with fewer lines of code, making it easier and faster to build great-looking user interfaces for your iOS apps.