Swift
UIButton
Multiline Text
iOS Development
Mobile UI

Swift - UIButton with two lines of text

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

UIButton can show two lines of text, but it does not happen automatically just because the title contains a newline. You usually need to configure the button's title label for wrapping, center alignment, and enough layout space for the second line to appear.

The Basic Setup

The most direct approach is to set a title with a line break and then configure the internal label.

swift
1import UIKit
2
3let button = UIButton(type: .system)
4button.setTitle("Buy Now\nShips Today", for: .normal)
5button.titleLabel?.numberOfLines = 2
6button.titleLabel?.textAlignment = .center
7button.titleLabel?.lineBreakMode = .byWordWrapping

That handles the text itself, but the button still needs enough width and height to render two lines. If Auto Layout compresses the button too much, the second line may be truncated or never shown.

A Complete Programmatic Example

Here is a view controller that creates a working two-line button:

swift
1import UIKit
2
3final class ViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6        view.backgroundColor = .systemBackground
7
8        let button = UIButton(type: .system)
9        button.translatesAutoresizingMaskIntoConstraints = false
10        button.setTitle("Buy Now\nShips Today", for: .normal)
11        button.titleLabel?.numberOfLines = 2
12        button.titleLabel?.textAlignment = .center
13        button.titleLabel?.lineBreakMode = .byWordWrapping
14        button.contentEdgeInsets = UIEdgeInsets(top: 12, left: 16, bottom: 12, right: 16)
15
16        view.addSubview(button)
17
18        NSLayoutConstraint.activate([
19            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
20            button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
21            button.widthAnchor.constraint(equalToConstant: 180)
22        ])
23    }
24}

The width constraint matters because the button needs room to decide where wrapping occurs. Without predictable width, multi-line layout becomes unreliable.

Use Attributed Titles for Better Styling

If the two lines need different fonts, spacing, or emphasis, use an attributed string.

swift
1import UIKit
2
3let button = UIButton(type: .system)
4let text = NSMutableAttributedString(
5    string: "Primary Action\n",
6    attributes: [
7        .font: UIFont.boldSystemFont(ofSize: 18)
8    ]
9)
10
11text.append(NSAttributedString(
12    string: "Secondary detail",
13    attributes: [
14        .font: UIFont.systemFont(ofSize: 13),
15        .foregroundColor: UIColor.secondaryLabel
16    ]
17))
18
19button.setAttributedTitle(text, for: .normal)
20button.titleLabel?.numberOfLines = 2
21button.titleLabel?.textAlignment = .center

This gives you more control than a plain string while keeping the same layout ideas.

Interface Builder and Storyboards

If you are using Interface Builder, the same rules apply:

  • set the button title with a line break
  • allow multiple lines on the title label
  • ensure the button has enough size in its constraints

The common mistake is to add the newline in Interface Builder and assume that is sufficient. The actual label behavior still controls whether the title wraps.

Watch the Layout, Not Just the Text

Two-line buttons are often really layout problems rather than text problems. If the text still appears on one line or gets truncated:

  • the button may be too narrow
  • the title label may still be single-line
  • the content insets may be too small
  • surrounding constraints may be compressing the button

When debugging, inspect the button frame and its title label in Xcode's view debugger. That usually makes the issue obvious.

Common Pitfalls

  • Setting a newline in the title but forgetting numberOfLines = 2.
  • Giving the button too little width or height for two lines to render.
  • Assuming Interface Builder wraps the title automatically without label configuration.
  • Forgetting centered text alignment, which often looks odd for multi-line button titles.
  • Styling the title with an attributed string but not keeping the label multi-line.

Summary

  • A two-line UIButton needs both a line break in the title and a multi-line title label.
  • Set numberOfLines, textAlignment, and lineBreakMode on titleLabel.
  • Auto Layout must give the button enough space to show two lines.
  • Use an attributed title when the two lines need different styles.
  • If the button still truncates, debug the layout constraints before assuming the text setup is wrong.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.