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

1 Answer 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)