Button Styles and Roles (SwiftUI)

Since iOS 15, system button styles compose from four modifiers: a style (bordered or borderedProminent), tint, controlSize, and buttonBorderShape. Together they cover most button designs without a custom ButtonStyle.

Roles

The optional role parameter (destructive or cancel) tells the system what the button means. A destructive button tints red, and the role carries into context menus, toolbar menus, and alerts.

Button("Delete", role: .destructive) {
  viewModel.delete()
}

Menu("Actions") {
  Button("New action") {}
  Button("Delete", role: .destructive) {}
}

Composing the Look

Button("New action") {}
  .buttonStyle(.borderedProminent)
  .tint(.green)
  .buttonBorderShape(.capsule)
  .controlSize(.large)

• .bordered gives the tinted, rounded-corner background used across iOS system UI; .borderedProminent fills the button with the tint color for the primary action.
• tint overrides the accent color, and unlike the app accent color it always wins, even against user preference.
• controlSize (mini, small, regular, large) sizes every control in the hierarchy. It is also the only handle on a bordered button's corner radius, which grows with the size.
• buttonBorderShape picks the outline: capsule, roundedRectangle, or automatic.

All four propagate through the environment, so setting them on a container styles every button inside it consistently.