How to make multi-line text in UIButton

Swift UIKit

The default appearance of UIButton is a single line text, but it also supports a multi-line text with some minor tweak.

Programmatically #

To make a multi-line text in UIButton, you insert a new line character (\n) wherever you want in button title and set lineBreakMode to byWordWrapping.

let button = UIButton(type: .system)
button.setTitle("Title\nSubtitle", for: .normal)
button.titleLabel?.lineBreakMode = .byWordWrapping

You can adjust text alignment with .textAlignment.

let buttonCenter = UIButton(type: .system)
buttonCenter.setTitle("Title\nSubtitle", for: .normal)
buttonCenter.titleLabel?.lineBreakMode = .byWordWrapping
buttonCenter.titleLabel?.textAlignment = .center

let buttonRight = UIButton(type: .system)
buttonRight.setTitle("Title\nSubtitle", for: .normal)
buttonRight.titleLabel?.lineBreakMode = .byWordWrapping
buttonRight.titleLabel?.textAlignment = .right
Button with textAlignment .natural (default), .center, and .right
Button with textAlignment .natural (default), .center, and .right

Storyboard #

You can achieve the same effect on the storyboard. Under Attributes inspector, set title with a new line character, and Line Break to Word Wrap.

But you can't adjust text alignment with Plain title. To change text alignment:

  1. Change the title to Attributed.
  2. Select all the text in the text field.
  3. Then select text alignment that you want.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Tweet Share

If you enjoy this article, you can subscribe to the weekly newsletter.

Every Friday, you’ll get a quick recap of all articles and tips posted on this site — entirely for free.

← Home