Overview
Feedback indicators show up either as a badged icon or dot within an icon button, or as an icon itself alongside a feedback message (see message bar as an example). We have four types of feedback (information, warning, success, and critical), and therefore four different icons and colors.
Badges
Icon buttons can be badged with a notification dot or small warning sign to indicate status behind that feature or webpage. Whenever possible, include a descriptive message within the panel behind an icon button in order to supplement any badge meanings.
Badges are placed on the top right of an icon, either overlaying it or an icon redraw can be also considered (see App Menu example below).
Implementation details: note that our official button component comes with an “attention” attribute that generates the badge. For Toolbar Icon Buttons, custom implementations need to be made, see CSS here.
App Menu indicating an update |
Firefox account indicating disconnection |
Feedback icons
Meaningful icons encouraged to be used alongside messages for accessibility purposes.
Feedback colors
See our list for information, warning, success, and critical icon and background feedback colors under Design Tokens:
Types
Information
“For your information” type of feedback has the lowest urgency, as it is meant for communicating passive messaging that doesn’t require user action.
Message bar informing an update will occur upon restart
Attention dot, a unique case
The attention dot is a unique green notification dot that shows up on tabs to indicate a change has occurred within it (e.g., a chat message was received), or the app menu icon to indicate a new browser update.
App menu indicator badged dot to signify a new update |
Indicator badged dot to indicate a change within a pinned website |
Warning
Warnings are for important information in regard to potentially unexpected functionality changes.
Warning badge to indicate Mozilla Account disconnection |
about:config warning of functionality changes potentially affecting performance and security
Success
Success notices indicate an action was accomplished successfully.
A message relaying the user's feedback was submitted successfully
|
Critical
Critical notices are meant for the most urgent type of feedback when users must take an action to proceed. They should be reserved for actions that will affect a user’s privacy and security.
A critical message about a potential security risk with a download |
Adding a new profile without a name |
A tab crash report
Accessibility
As to not rely on color and symbolism alone, visual indicators should be accessible for those with visual disabilities. For example, a component such as the message bar has a role=alert .