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

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

Using this Component

  1. 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>
    		
  2. 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>
  3. 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>
  4. 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()