How it works
BorderedButtonStyle is a built-in ButtonStyle that renders a button with a tinted, rounded-rectangle background and platform-standard padding — the familiar filled-capsule look of a standard action button. Rather than building that appearance from a shape, fill, and content padding by hand, you apply this style and let SwiftUI draw a button that matches the current platform and adapts to size classes, control size, and light or dark appearance. Reach for it when you want a button to read as a prominent, self-contained tap target instead of plain tappable text.
Apply the style with buttonStyle(_:)
BorderedButtonStyle takes effect when you pass an instance to the buttonStyle(_:) modifier on a Button. In the example,
.buttonStyle(BorderedButtonStyle())wraps theButton("Add to Cart")label in the bordered treatment, replacing SwiftUI's default plain text appearance with a bordered control.Prefer the .bordered shorthand
Because BorderedButtonStyle conforms to PrimitiveButtonStyle, SwiftUI exposes it as the static member
.bordered, so you can write.buttonStyle(.bordered)instead of constructing the struct directly. TheButton("Checkout")uses this shorthand; it is equivalent to passingBorderedButtonStyle()but reads more fluently in a modifier chain.Color the border with tint(_:)
BorderedButtonStyle derives its background fill from the view's tint, so the tint(_:) modifier is how you recolor it. Adding
.tint(.green)to theCheckoutbutton paints its bordered background green; without a tint, the style falls back to the accent color, which is whyAdd to Cartkeeps the default blue.Apply per button, not per container
The style attaches to an individual Button, so each control can adopt or skip it independently. In the
VStack, both buttons opt into the bordered look, but you could leave one plain — the modifier scopes the appearance to the button it sits on, not to the surrounding stack.
.tint(.green) on the Checkout button to .tint(.red) to see the bordered background recolor while the rounded-capsule shape and padding stay the same.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct BorderedButtonStyleDemo: View {
var body: some View {
VStack(spacing: 16) {
Button("Add to Cart") {}
.buttonStyle(BorderedButtonStyle())
Button("Checkout") {}
.buttonStyle(.bordered)
.tint(.green)
}
.padding()
}
}