Change SwiftUI Button Size

In this tutorial, we will see how to easily change the size of buttons in our SwiftUI app. Buttons are an essential part of any user interface, and SwiftUI provides a simple and easy way to customize their sizes to fit our design requirements.

There are some ways to control a button size mentioned below.

• Using the .controlSize() modifier
• Manually customizing the label

We can easily control or customize the size of a button by using the above mentioned methods. Let’s explore them one by one.

Using the .controlSize() modifier

We can adjust the size of buttons using the .controlSize() modifier in your SwiftUI app, this is a convenient way. SwiftUI provides this modifier to easily change the button’s size according to predefined control sizes.

Syntex

.controlSize(.large)

This modifier provides us with four control sizes, those are mentioned below

1. mini
2. small
3. regular (default size)
4. large

Now, look at the example below to know how they actually work

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Button("Mini Button") {
                        
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.mini)
            
            Button("Small Button") {
                        
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.small)
            
            Button("Regular Button") {
                        
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.regular)
            
            Button("Large Button") {
                        
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
    }
}

In the above program, I have labeled the buttons “Mini Button,” “Small Button,” “Regular Button,” and “Large Button.”

Then, I specified different control sizes for each button using the .controlSize() modifier and applied a bordered prominent button style using the .buttonStyle() modifier.

Output:

The control size of each button affects its dimensions and layout.

Manually customizing the label

We can manually customize the size and appearance of a button by adjusting its label. In SwiftUI the label of a button means the content that is displayed on the surface of the button. It’s what users see and interact with.

We can use the .font() modifier, .paddind() and .frame() modifier to manually customize a label to control the size of a button.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack (spacing: 30) {
            Button {
                // Action to perform when the button is tapped
            } label: {
                Text("Custom Button")
                    .font(.title) // Adjust the font style here
                    .padding()
                    .background(.brown)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .buttonStyle(.plain)
            
            Button {
                // Action to perform when the button is tapped
            } label: {
                Text("Custom Button")
                    .font(.title)
                    .padding(.horizontal, 20) // Adjust the horizontal padding
                    .padding(.vertical, 7)   // Adjust the vertical padding
                    .background(.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .buttonStyle(.plain)
            
            Button {
                // Action to perform when the button is tapped
            } label: {
                Text("Custom Button")
                    .font(.largeTitle) // Customize the font
                    .frame(width: 250, height: 60) // Customize the frame size
                    .background(.mint) // Customize the background color
                    .foregroundColor(.white) // Customize the text color
                    .cornerRadius(10)
            }
            .buttonStyle(.plain)
        }
    }
}

In the above program, the .buttonStyle(.plain) modifier applies a plain button style to each Button. The .plain style means the button will look like a simple button with the configured appearance.

Output: