Lowest level of caution. Use when you want to present timely, concise information that accelerates a workflow, or to provide key information or actions that avoid a dead end in the experience.
Use in exceptional situations where the use should be mindful of some sort of temporary condition. Notably, yellow is the most visible color to the human eye.
Use for a situation that is not harmful or destructive yet but could easily turn into one. (e.g. You're about to run out of storage space).
Use when a serious failure or error has occured and information may have been lost or some actions are impossible.
Use when the user is explicitly forbidden from a particular action not because of an error, but because of security restrictions or policy enforcements.
Use sparingly when there's an exceptional need to tell the use that something went right. The preferred way to show success is to show, not tell (e.g. by navigating to show the result of the user action and letting users continue working on it or elsewhere).
-
Confirm that you have references to Fabric's CSS on your page:
<head> <link rel="stylesheet" href="fabric.min.css"> <link rel="stylesheet" href="fabric.components.min.css"> </head> -
Copy the HTML from one of the samples above into your page. For example:
<div class="ms-MessageBar"> <div class="ms-MessageBar-content"> <div class="ms-MessageBar-icon"> <i class="ms-Icon ms-Icon--Info"></i> </div> <div class="ms-MessageBar-text"> Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.<br> <a href="" class="ms-Link">Hyperlink string</a> </div> </div> </div> -
Verify that the component is working the same as in the sample above.
-
Replace the sample HTML content (such as the content of
.ms-MessageBar-text) with your content.
Link