Feedback
How do you communicate feedback and status in a consistent, predictable and reassuring way across your application.
Using pictography you can instantly make clear what a message means to the user, independent of layout or component. Multiple components can reuse the same icons to ensure consistent understanding and predictable behaviour. This pattern establishes a fixed mapping between meaning, icon, and usage across components.
Info
Provide neutral information that may be relevant to the user, without urgency or required action.
Use for
Additional context or explanation
Helpful, non‑critical information
Success
Confirm that an action has been completed successfully.
Use for
Successful form submissions
Completed actions or steps
Positive system states
Warning
Indicate that something requires attention, but can still be corrected.
Use for
Validation feedback; this icon appears at the start of the error message underneath the invalid input
Missing or incorrect input
Situations that may cause issues if not addressed
Danger
Warn users about destructive or irreversible actions.
Use for
Deleting content
Overwriting or permanently changing data
Related
- Callout: Display persistent, important messages that remain visible as part of the page layout
- Inline message: Event-driven feedback that appears after a user or system action
- Form field: Provides validation feedback for form controls
- Progress bar: Shows task progress and can display success or failure states