A value that describes the purpose of a button.
A button role provides a description of a button's purpose. For example,
the ``ButtonRole/destructive`` role indicates that a button performs
a destructive action, like delete user data:
```
Button("Delete", role: .destructive) { delete() }
```
Members (4)
get · iOS 15.0+
destructive
TypeScript
static get destructive(): ButtonRole
Swift declaration
static let destructive: ButtonRole
A role that indicates a destructive button.
Use this role for a button that deletes user data, or performs an
irreversible operation. A destructive button signals by its appearance
that the user should carefully consider whether to tap or click the
button. For example, SwiftUI presents a destructive button that you add
with the ``View/swipeActions(edge:allowsFullSwipe:content:)``
modifier using a red background:
```
List {
ForEach(items) { item in
Text(item.title)
.swipeActions {
Button(role: .destructive) { delete() } label: {
Label("Delete", systemImage: "trash")
}
}
}
}
.navigationTitle("Shopping List")
```
get · iOS 26.0+
close
TypeScript
static get close(): ButtonRole
Swift declaration
static let close: ButtonRole
A role that indicates a button that closes the current operation.
Unlike a cancel operation, a close operation doesn't lose
progress for a user.
The following view would display a close button in the toolbar.
```
struct NewContactSheet: View {
@Environment(\.dismiss) private var dismiss
var body: some View {
NavigationStack {
NewContactEditor()
.toolbar {
Button(role: .close) {
dismiss()
}
}
}
}
}
```
get · iOS 15.0+
cancel
TypeScript
static get cancel(): ButtonRole
Swift declaration
static let cancel: ButtonRole
A role that indicates a button that cancels an operation.
Use this role for a button that cancels the current operation.
Unlike confirmation, a cancel action implies progress will be
lost by performing the operation.
get · iOS 26.0+
confirm
TypeScript
static get confirm(): ButtonRole
Swift declaration
static let confirm: ButtonRole
A role that indicates a button that confirms an operation.
The following view would display a confirm button in the toolbar.
```
struct NewContactSheet: View {
var body: some View {
NavigationStack {
NewContactEditor()
.toolbar {
Button(role: .confirm) {
saveChanges()
}
}
}
}
}
```
