Design Principle
Clickable objects must be recognizable, while informational containers should not masquerade as buttons.
Principle
Clickable objects must be recognizable, while informational containers should not masquerade as buttons.
Design action
Clickable cards need hover/focus and a clear main link; tool panels need stable header, controls, and status area without decorative nested cards.
Examples
Positive example: Resource libraries, knowledge lists, moderation queues, and detail sidebars. Counterexample: The whole card is clickable but lacks hover/focus.
Apply when
Resource libraries, knowledge lists, moderation queues, and detail sidebars. Cards contain several sub-actions.
Source notes
Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Clickable cards need hover/focus and a clear main link; tool panels need stable header, controls, and status area without decorative nested cards.