Post

It’s missing explaining that cancellation action places the button on the trailing edge of the leading edge of the navbar, if that’s not a bug.

But some people on X pointed that Apple doesn’t respect this guideline. Or maybe a “Close” behaves differently than a “Cancel”? 🤔 What’s Apple stake on this @mikestern.bsky.social? Could you please specify in the Apple HIG if this is valid for both Close and Cancel? Thanks! x.com/vistar941/st...

Khan Winter

@khanwinter.com

Seems like there’s a difference between “close” and “cancel” where “cancel” is a destructive action with an opposite confirm button. Close is non-destructive so it stays in the primary trailing spot

Yes so it would be good to have a close ToolbarItemPlacement that would correctly position non-destructive actions.

Yes, close is to my knowledge trailing in as it is usually the only toolbar button. However, the button in messages is actually labeled as a cancel button when using VoiceOver (makes sense, content gets lost when closing it).

🤯 I’m more lost than before 😂 We could also put the close at the leading edge, like in macOS (red).

developer.apple.comButtonRole | Apple Developer DocumentationA value that describes the purpose of a button.

There are new roles (close and confirm) along with a new initializer requiring no label at all.That's why there are so many checkmarks and xmarks in 26 Confirm -> save, cancel -> something gets lost, destructive -> delete, close exploreswiftui.com/library/butt... developer.apple.com/documentatio...

developer.apple.comcancellationAction | Apple Developer DocumentationThe item represents a cancellation action for a modal interface.

In SwiftUI (UIKit too?), there is the semantic cancellationAction ToolbarItemPlacement. “In iOS, iPadOS, tvOS, and watchOS, the system places cancellationAction items on the leading edge of the navigation bar.” Maybe there should be a closeAction too? developer.apple.com/documentatio...

David

@dkroeg.bsky.social

developer.apple.comclose | Apple Developer DocumentationA role that indicates a button that closes the current operation.

There is a button role .close which places the button on the right side in the top toolbar: developer.apple.com/documentatio...

I don’t think the position is determined by the ButtonRole. If I use the cancel role for example, it’s also positioned on the trailing edge of the navigation bar. Which seems to be opposite to the cancellationAction ToolbarItemPlacement.

There is cancellationAction toolbar placement that automatically put the button in the correct place.

developer.apple.comcancellationAction | Apple Developer DocumentationThe item represents a cancellation action for a modal interface.

It always puts the button on the leading edge. And Apple positions X button on the trailing edge. bsky.app/profile/alpe...

Axel Le Pennec@alpennec.com

Yes, Apple puts Cancel buttons on the leading edge. Close buttons on the trailing edge.

Here is a close button on the trailing edge

They do not differentiate cancel and close actions. I guess cancel goes on the trailing edge only when it is a single action.

When you are not using toolbar placement, items always appear on the trailing edge.

So, we have 2 cases here. 1. You have cancel(X) and done(checkmark) buttons. Then you place cancel on leading edge and done on trailing edge. 2. You have only cancel(X) and you display it on the trailing edge as a single possible action.