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.

MessageBanner

Overview

Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.

Using this Component

Confirm that you have references to Fabric's CSS and JavaScript on your page:

					<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>
		
	

Copy the HTML from one of the samples below into your page. For example:

<div class="ms-MessageBanner">
  <div class="ms-MessageBanner-content">
    <div class="ms-MessageBanner-text">
      <div class="ms-MessageBanner-clipper">
        You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
      </div>
    </div>
    <button class="ms-MessageBanner-expand">
      <i class="ms-Icon ms-Icon--ChevronDown"></i>
    </button>
    <div class="ms-MessageBanner-action">
      <button class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">Get More Storage</span> 
      </button>
    </div>
  </div>
  <button class="ms-MessageBanner-close">
    <i class="ms-Icon ms-Icon--Clear"></i>
  </button>
</div>

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all MessageBanner components on the page:

<script type="text/javascript">
  var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
</script>

Replace the sample HTML content with your content.

Variants

Default MessageBanner

<div class="ms-MessageBanner">
  <div class="ms-MessageBanner-content">
    <div class="ms-MessageBanner-text">
      <div class="ms-MessageBanner-clipper">
        You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
      </div>
    </div>
    <button class="ms-MessageBanner-expand">
      <i class="ms-Icon ms-Icon--ChevronDown"></i>
    </button>
    <div class="ms-MessageBanner-action">
      <button class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">Get More Storage</span> 
      </button>
    </div>
  </div>
  <button class="ms-MessageBanner-close">
    <i class="ms-Icon ms-Icon--Clear"></i>
  </button>
</div>

<script type="text/javascript">
  var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
</script>

You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.

Methods

Name	Parameters	Description
`init()`	None	Initializes component
`show()`	None	Shows MessageBanner if hidden
`showBanner()`	None	Shows MessageBanner if hidden, (deprecated) now use show()