Design Principle
Feedback placement should match the object; toast fits short global status, while inline feedback fits fields and local fixes.
Principle
Feedback placement should match the object; toast fits short global status, while inline feedback fits fields and local fixes.
Design action
Use toast for save success; place errors, validation, missing information, and actionable feedback near the relevant control.
Examples
Positive example: Forms, settings, upload, AI generation, and admin actions mix local and global states. Counterexample: A field error appears only in a disappearing toast.
Apply when
Forms, settings, upload, AI generation, and admin actions mix local and global states. 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. 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
Use toast for save success; place errors, validation, missing information, and actionable feedback near the relevant control.