In the video Using an alert to pop a Navigation Link programmatically Paul crafts a delete button in a toolbar like this:
.toolbar {
Button { showingDeleteAlert = true }
label: { Label("Delete this book?", systemImage: "trash") }
}
However, on the iPhone you will only see the rubbish bin icon. Where did the label go? You may wonder why you would use a Label view rather than just a simple Image(systemImage:) view?
The main reason you want to do this is for accessibility!
The Label view combines both image and title into a single accessibility element. SwiftUI uses the title as an accessibility label for the whole view.
For your customers who use VoiceOver to navigate your application, the words "Image Trash" doesn't hold much value. By using a label, VoiceOver instead will read out "Delete this book?" with appropriate voice inflection. Trés cool!
The documentation also states:
Some containers might apply a different default label style, such as only showing icons within toolbars on macOS and iOS. To opt in to showing both the title and the icon, you can apply the titleAndIcon label style
//=============== titleAndIcon example
.toolbar {
Button { showingDeleteAlert = true }
label: { Label("Delete this book?", systemImage: "trash")
.labelStyle(.titleAndIcon) // this forces both title and icon
}
}
This is very crowded on an iPhone. 10/10 Don't recommend. Maybe it looks better in a MacOS application?