How to make multi-line text in UIButton

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

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

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.