Design Principle
Button placement signals scope: row-level, card-level, section-level, and global actions must not blur together.
Principle
Button placement signals scope: row-level, card-level, section-level, and global actions must not blur together.
Design action
Place row actions inline or at row end, show bulk actions only after selection, and put page-level actions near the title or toolbar.
Examples
Positive example: Table row actions, bulk actions, detail actions, and card lists have multiple action levels. Counterexample: Row actions sit at the page top without selected objects.
Apply when
Table row actions, bulk actions, detail actions, and card lists have multiple action levels. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Place row actions inline or at row end, show bulk actions only after selection, and put page-level actions near the title or toolbar.