Inline Feedback
Use for a small local response beside the field or action that caused it.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
Use for a small local response beside the field or action that caused it.
Use when
The user needs to know that a value saved, copied, failed validation, or recovered.
Avoid
Global announcements for local changes or messages that disappear before they can be read.
Accessibility
Use status for non-urgent confirmation and alert for errors; associate invalid text with the control.
Keyboard and touch
Dismiss and recovery controls must be native buttons and remain reachable without pointer hover.
Reduced motion and performance
Keep layout stable and avoid per-keystroke animation; state changes should remain immediate.
Composition and anti-patterns
Escalate to Toast or Undo Bar only when the user has left the local context.
Source: packages/skills/feedback/inline-feedback.md