Bottom sheets and centered dialogs may follow different button-order conventions

What it is

The same Confirm / Cancel pair can be laid out differently in a centered dialog and a bottom sheet (action sheet). iOS action sheets pin Cancel alone at the very bottom, apart from destructive items. A Material bottom sheet may make the primary a full-width first row. Centered dialogs still use left-right slots. Pasting a dialog’s left-right order onto a sheet, or moving “Cancel always at the bottom” into a desktop dialog, steps on the other convention.

Why it happens

The two containers train different motor landings. A sheet grows from the thumb’s easy zone; Cancel must be easy to reach and far from danger, so it is often a separate strip from the list. A centered dialog comes from a desktop window, with buttons in a footer row at the reading end. Swap the container and “confirm is on the right” stops applying: a sheet is a vertical list, there is no right. People may still hit “the last item” or “the visually heaviest strip,” which in an action sheet are often Cancel and the destructive item. Moving the container without moving the mapping changes the shape of the slip. Convention belongs to container type, not to one button in the product.

Studying it

Put the same task (share / delete / cancel) in a centered dialog and a bottom sheet, copy unchanged, layout adapted. Use people who live on that platform.

Independent variables: container type, whether the other container’s order is borrowed, one-handed thumb. Dependent variables: wrong presses, time to find Cancel, “Cancel should be at the bottom / on the right.”

Testing dialogs only on desktop and sheets only on phones will miss cross-container moves. The same person should do both containers.

Where it stops holding

Desktop has no real bottom sheet; using sheet order in a modal wastes vertical space and has no thumb rationale. A custom Web sheet that does not look like the system action sheet will not invoke that convention—be self-consistent rather than pretending to be iOS. Automotive and TV far-field containers are a third set; do not copy a phone sheet onto them.

Applying it

• Specify footer layout separately for dialogs and sheets; do not share one “button order” constant.
• In an iOS-style action sheet, split Cancel from destructive items in space; do not put them in one dialog-footer row.
• When changing container type, re-check that container’s convention rather than copying coordinates.
• Verify by asking a platform user, labels covered, where Cancel will be. Dialog: left or right; sheet: the bottom. The same answer for both containers means the convention was moved wrongly.

Related

• Within the group: E1.18.1 Default focus should land on a non-destructive option, not on danger · E1.18.3 The default button fired by Enter must not be a destructive action · E1.18.4 A cross-platform product should follow each OS’s order
• Adjacent: E4.15 Action sheets · E4.10 Modal dialogs · E1.10 Button order
• Search terms: action sheet · bottom sheet · dialog footer