CODEWITHSUNDEEP
iosswiftswiftui
Jasjeev
Jasjeev

Reputation: 425

How do I make a SwiftUi Button's text larger and/or bold

Say I have a Button in SwiftUI:

Button("Tap me") {
    print("Button tapped!")
}

How can I can I make the font size of the Button's text larger and bold?

Upvotes: 18

Views: 17752

Answers (5)

RTXGamer
RTXGamer

Reputation: 3740

Button("Tap me") {
    print("Button tapped!")
}.font(.system(size: 30, weight: .bold, design: .default))

Upvotes: 8

scraptechguy
scraptechguy

Reputation: 87

You can increase font size with .font(.system(size: <font size>)) method. As for the bold part, you can put text between two pairs of *. This allows you to make bold specific parts of text or the whole thing.

Button(action: {}, 
       label: { 
           Text("Tap **me**").font(.system(size: <font size>))
})

Upvotes: 0

swift-lynx
swift-lynx

Reputation: 3765

If you are using a toolbar and want the confirmation/add/save button to be bold, as it's standard in iOS, you just have tell the the toolbar that your button is a confirmation item.

List {
  // ...
}
.toolbar {
  ToolbarItem(placement: .confirmationAction) {
    Button("Add") {
      // ...
    }
  }
}

You simply wrap your button in a ToolbarItem with the placement: .confirmationAction.

That way, the button will be placed on the top right in your toolbar and appears bold as well.

Upvotes: 4

chrs
chrs

Reputation: 6106

You are right about using .system(size: ) on macOS you need to create a PlainButtonStyle button in order for the text to stay inside the button. This is how I have done it

Button("Tap me") {
  print("Button Tapped!")
}.padding()
 .font(.system(size: 20, weight: Font.Weight.bold))
 .foregroundColor(Color.white)
 .background(RoundedRectangle(cornerRadius: 8).fill(Color.blue))
 .buttonStyle(PlainButtonStyle())

Upvotes: 10

George
George

Reputation: 30441

Use the bold() Text modifier on a Button's label.

Example:

Button {
    print("Button tapped!")
} label: {
    Text("Tap me").bold()
}

To make the text larger and bold, just chain the modifiers:

Button {
    print("Button tapped!")
} label: {
    Text("Tap me")
        .font(.title)
        .bold()
}

Upvotes: 17

Related Questions