Snippets
SwiftUI Toolbar and ControlGroup Actions
Place primary and secondary commands in toolbars with predictable placement, grouping, tinting, and keyboard-aware behavior.
4 min readUpdated 2026-06
import SwiftUI
struct NoteEditor: View {
var body: some View {
TextEditor(text: .constant("Draft"))
.navigationTitle("Note")
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
ControlGroup {
Button("Undo", systemImage: "arrow.uturn.backward") {}
Button("Redo", systemImage: "arrow.uturn.forward") {}
}
}
ToolbarItem(placement: .keyboard) {
Button("Done") { hideKeyboard() }
}
}
}
}Implementation notes
Toolbar placement is a request to the platform; verify the result on every device family you target.
ControlGroup is useful when several compact controls work as one editing cluster.
Use system images and accessibility labels for icon-only toolbar buttons.
Checklist
Keep primary actions easy to reach.
Do not overload the toolbar with every possible command.
Preview with large titles and inline titles.
Related reference
SwiftUI Sheets, Popovers, and Detents
Present focused secondary work with sheets, popovers, and detents while keeping dismissal and size behavior explicit.
SwiftUI Alerts and Confirmation Dialogs
Use alerts for urgent decisions and confirmationDialog for action choices that can adapt across iPhone, iPad, and macOS.
SwiftUI foregroundStyle and tint
Prefer foregroundStyle and tint for modern SwiftUI color styling, especially when controls, symbols, gradients, and semantic materials mix.