Design Principle
Critical mobile actions should be thumb-reachable without covering content, errors, or system navigation.
Principle Critical mobile actions should be thumb-reachable without covering content, errors, or system navigation.
Design action Pin primary action, secondary action, or price summary to the bottom safe area; add bottom padding and handle keyboard-open states.
Examples Positive example: Mobile checkout, detail purchase, form submit, filter apply, and multi-step flows. Counterexample: The sticky bottom bar covers the last form error.
Apply when Mobile checkout, detail purchase, form submit, filter apply, and multi-step flows. Users need to judge state, scope, risk, or next action quickly.
Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.
Agent Directive
Pin primary action, secondary action, or price summary to the bottom safe area; add bottom padding and handle keyboard-open states.