Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UIĀ Fabric React as your front-end framework.

Overview

A MessageBar is an area at the top of a primary view that displays relevant status information. You can use a MessageBar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.

Using this Component

  1. Confirm that you have references to Fabric's CSS on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    		
  2. Copy the HTML from one of the samples below 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>
  3. Replace the sample HTML content with your content.

Variants

Default MessageBar
<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>
Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
Hyperlink string
Success MessageBar
<div class="ms-MessageBar ms-MessageBar--success">
  <div class="ms-MessageBar-content">
    <div class="ms-MessageBar-icon">
      <i class="ms-Icon ms-Icon--Completed"></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>
Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
Hyperlink string
Error MessageBar
<div class="ms-MessageBar ms-MessageBar--error">
  <div class="ms-MessageBar-content">
    <div class="ms-MessageBar-icon">
      <i class="ms-Icon ms-Icon--ErrorBadge"></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>
Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
Hyperlink string
Blocked MessageBar
<div class="ms-MessageBar ms-MessageBar--blocked">
  <div class="ms-MessageBar-content">
    <div class="ms-MessageBar-icon">
      <i class="ms-Icon ms-Icon--Blocked"></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>
Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
Hyperlink string
Warning MessageBar
<div class="ms-MessageBar ms-MessageBar--warning">
  <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>
Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
Hyperlink string
Severe Warning MessageBar
<div class="ms-MessageBar ms-MessageBar--severeWarning">
  <div class="ms-MessageBar-content">
    <div class="ms-MessageBar-icon">
      <i class="ms-Icon ms-Icon--Warning"></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>
Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
Hyperlink string