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