UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Contextual Action Placement

Contextual Action Placement turns a frequent interface judgment into an executable constraint before generation.

actionscontextlayout

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.

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.

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.

Avoid

  • Row actions sit at the page top without selected objects.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
84%
Version
v1
Published
6/6/2026