NEW: Learn to build the incredible iOS 15 Weather app today! >>

Day 53: Bookworm Delete Book Button (Use Label? or Image?)

Forums > 100 Days of SwiftUI

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?

   

Hacking with Swift is sponsored by Essential Developer

SPONSORED Learn the most up-to-date techniques and strategies for testing new and legacy Swift code in this free practical course for iOS devs who want to become complete Senior iOS Developers.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.