Fabric-JS

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.

MessageBar

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

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" />

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>

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