Icon
Message Text
Dismiss Control
Info: Use to give a non-critical or general information or instruction.
Confirm: Use to indicate a successful, completed, or desirable state when it’s important to provide positive reinforcement to the user.
Warning: Use to provide status updates that the user should watch. A warning message may require the user’s attention and potential action.
Alert: Use to communicate an error, decline, failure, removal or critical state that requires user attention.
Default
Hover
1. Brief and Concise
Message card content should be brief and concise.
2. Links
Message card may contain a single navigation link. This can be used to direct the user to additional resources or to another area of the application.
3. Dismissible
The "Dismissible" property gives the user the ability to remove the message card. When the message card is removed, the other elements and parent container should adjust to fill the space. Message cards should be dismissible unless they contain critical information or an important step users need to take.
Related Components
Additional Reading
Cards: UI-Component Definition https://www.nngroup.com/articles/cards-component/