Protocol¶
ButtonStyle¶
This protocol is used to create a custom button style.¶
Declaration¶
protocol ButtonStyle
Overview¶
The ButtonStyle protocol provides a template to create a reusable style for your buttons. It also provides data about the button and its interaction state.
- Note: This protocol gives you a way to detect when the button is being pressed. If you would like to trigger the button programmatically, use PrimitiveButtonStyle instead. To make a custom style, create a new structure that conforms to ButtonStyle. This new style can be easily reused across your application. The style adapts to the user's current interaction state (i.e. on press, on release).
Your structure only needs to implement one method: makeBody(configuration:). makeBody(configuration:) accepts a ButtonStyleConfiguration, which passes the original label to display the button view and a ButtonStyleConfiguration/trigger() to execute its action.
struct BananaButtonStyle: ButtonStyle {
var color: Color
func makeBody(configuration: Self.Configuration) -> some View {
BananaButton(configuration: configuration, color: color)
}
struct BananaButton: View {
let configuration: BananaButtonStyle.Configuration
let color: Color
var body: some View {
configuration.label
.padding()
.background(RoundedRectangle(cornerRadius: 10).fill(color))
.scaleEffect(configuration.isPressed ? 0.8: 1)
.animation(.spring())
}
}
}
struct ExampleView: View {
var body: some View {
Button("Banana🍌🍌", action: { tap() })
.buttonStyle(BananaButtonStyle(color: .yellow))
}
func tap() { /\* implement here \*/ }
}

Button style applies to all buttons within a view hierarchy. For example, you could apply ButtonStyle to a VStack.
struct ExampleView: View {
var body: some View {
VStack {
Button("🍌🍌", action: tap)
Button("🍎🍎", action: tap)
Button("🍑🍑", action: tap )
}
.buttonStyle(BananaButtonStyle(color: .yellow))
}
func tap() { /\* implement here \*/ }
}

For more on how to customize your button style body, check out makeBody(configuration:). To provide greater control over when and how a button triggers it's action use PrimitiveButtonStyle. While this property requires more work to setup, it provides more customization.
Availability¶
iOS 13.0+
macOS 10.15+
tvOS 13.0+
watchOS 6.0+
Topics¶
Instance Method¶
makeBody(configuration:) Creates a view that represents the body of a button.
Type Alias¶
Configuration The properties of a button.
Associated Type¶
Body A view that represents the body of a button.