I'm using Xcode 15 (can't update further than that). The top 7 buttons are how I want my buttons to look. I added the modifier buttonStyle(PlainButtonStyle()) to those 7. But if I add it to the ones with the controlSize modifier, then the button sizes will all be the default.

Here is my code. I only left in the Primary button, and the Large button.

Button("Primary") {
    
}
.padding(10)
.buttonStyle(PlainButtonStyle())
.foregroundColor(.white)
.background(Color("Primary"))
.font(.title3)
.cornerRadius(10)



Button("Large") {
    
}
.padding(10)
.background(Color("Primary"))
.font(.title3)
.controlSize(.large)
.cornerRadius(10)

I'm using Xcode 15 (can't update further than that). The top 7 buttons are how I want my buttons to look. I added the modifier buttonStyle(PlainButtonStyle()) to those 7. But if I add it to the ones with the controlSize modifier, then the button sizes will all be the default.

Here is my code. I only left in the Primary button, and the Large button.

Button("Primary") {
    
}
.padding(10)
.buttonStyle(PlainButtonStyle())
.foregroundColor(.white)
.background(Color("Primary"))
.font(.title3)
.cornerRadius(10)



Button("Large") {
    
}
.padding(10)
.background(Color("Primary"))
.font(.title3)
.controlSize(.large)
.cornerRadius(10)

• swiftui
• button

Share Improve this question Follow edited Mar 27 at 16:13 HangarRash 15.1k55 gold badges2020 silver badges5555 bronze badges asked Mar 27 at 11:40 tneilson08tneilson08 15722 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

It's your own custom buttons - you should decide how they should look for each ControlSize.

You should write your own custom ButtonStyle, one for each of "primary", "secondary", "success", "danger" and so on. Or if all of them are the same except for the background color, just write one ButtonStyle for all of them.

For example, you can write the "primary" button style like this:

struct PrimaryButtonStyle: ButtonStyle {
    @Environment(\.controlSize) var controlSize
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(buttonPadding)
            .background(Color("Primary"), in: .rect(cornerRadius: 10))
            .contentShape(.rect(cornerRadius: 10))
    }
    
    var buttonPadding: CGFloat {
        switch controlSize {
        case .mini: 1
        case .small: 5
        case .regular: 10
        case .large: 16
        case .extraLarge: 20
        @unknown default: 10
        }
    }
}

extension ButtonStyle where Self == PrimaryButtonStyle {
    static var primary: PrimaryButtonStyle { .init() }
}

As an example, I have made the padding vary depending on the controlSize environment value. You can easily make other things (font size, corner radius, etc) depend on the control size if you want. It's your design.

Here are the buttons with various control sizes side by side:

HStack {
    Button("Mini") {}
        .controlSize(.mini)
    Button("Small") {}
        .controlSize(.small)
    Button("Regular") {}
        .controlSize(.regular)
    Button("Large") {}
        .controlSize(.large)
    Button("Extra Large") {}
        .controlSize(.extraLarge)
}
.buttonStyle(.primary)