Interaction Pattern Template for Product Managers

A component is a single UI element (button, input, card). An interaction pattern describes how multiple components work together to solve a user problem. A confirmation dialog pattern uses a modal component, button components, and text components. The pattern specifies the behavior, timing, and state management that the individual component docs do not cover.

Most products have 15-25 distinct interaction patterns: confirmation, inline editing, drag-and-drop, search/filter, multi-select, pagination, infinite scroll, toast notifications, form validation, file upload, date picking, onboarding tours, command palette, contextual menus, and a few domain-specific patterns. Document the ones that appear in multiple features first.

Yes, but you can reference the APG instead of duplicating it. Document your product-specific decisions: which optional behaviors you implement, how the pattern adapts on mobile, what content guidelines apply, and what the loading/error states look like. The APG covers accessibility behavior but not your product's visual design, content, or responsive adaptation.

Document the base pattern first, then list variations as sub-patterns with their specific differences. For example, a "Confirmation Dialog" base pattern might have variations: "Destructive Confirmation" (red button, requires typing the item name), "Batch Confirmation" (lists affected items), and "Async Confirmation" (shows loading state). Each variation references the base pattern and notes only the differences. The [design system documentation template](/templates/design-system-documentation-template) uses a similar approach for component variants.

Patterns are building blocks. User flows are sequences. A "sign up" flow might use the "form validation" pattern, the "password strength indicator" pattern, and the "email verification" pattern in sequence. Document patterns as standalone units. Document flows separately as sequences that reference patterns. This prevents duplication and keeps patterns reusable across multiple flows. ---