Edge Insets indents for UIButton

How to add an indent between text and picture in UIButton. How to place an icon to the right of the text.

Help in chat on Telegram for iOS developers

Reads in 6 minutes Updated 5 months ago

You control three indents - imageEdgeInsets, titleEdgeInsets and contentEdgeInsets. Before diving into the process, take a look at sample project. The project clearly shows how the indentation combinations work. In the video I put a fill for the elements:

  1. Red -> background
  2. Yellow -> icon
  3. Blue -> title
Indent control in UIButton.


Adds indents around the header and icon. If you put negative values, the indentation will be reduced. Code:

previewButton.contentEdgeInsets.left = 10
previewButton.contentEdgeInsets.right = 10
previewButton.contentEdgeInsets.top = 5
previewButton.contentEdgeInsets.bottom = 5
 contentEdgeInsets indents
contentEdgeInsets indents

The indentation around the content affects only the button size. The frame and the clickable area are enlarged accordingly.

imageEdgeInsets and titleEdgeInsets

They are in the same section, because your task is to add indents on one side and reduce them on the other. Let's add an indent between the picture and the header 10pt. The first idea is to add an indent through the property imageEdgeInsets:

Indent imageEdgeInsets between the icon and the text.

The indentation is added, but does not affect the size of the button - the icon flies behind the button. TitleEdgeInsets` behaves the same way - it doesn't change button size. If you indent the text positively to the left and the icon negatively indented to the left - then there will be a distance of 10pt between the text and the icon.

previewButton.imageEdgeInsets.left = -10
previewButton.titleEdgeInsets.left = 10

This is the symmetry I wrote about above.

contentEdgeInsets changes the size of the button
The imageEdgeInsets and titleEdgeInsets do not

Icon to the right of the text

Let's put the icon to the right of the header:

let buttonWidth = previewButton.frame.width
let imageWidth = previewButton.imageView?.frame.width ?? .zero

Shift the header to the left edge. The indent on the left was imageWidth. If you decrease by this value, you get the left edge.

previewButton.titleEdgeInsets = UIEdgeInsets(
    top: 0, 
    left: -imageWidth, 
    bottom: 0, 
    right: imageWidth

We move the icon to the right edge. The default indent was `0`, so the new Y point will have the width of the icon.

previewButton.imageEdgeInsets = UIEdgeInsets(
    top: 0, 
    left: buttonWidth - imageWidth, 
    bottom: 0, 
    right: 0


Note, from iOS 15 the indentations are marked as deprecated.

 Screenshot from Apple Developer website
Screenshot from Apple Developer website

Property will work for a few years. Apple recommends using the configuration.

You can play with the indents in sample project.

We try to translate the tutorial well, but it's not our native language. We appreciate it if you can submit a Pull Request with fixes