Fabric JS

Overview

Allows users to take action, such as submitting a form or dismissing a message. Primary use is in command bar or in Callout.

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-CommandButton">
      <button class="ms-CommandButton-button">
        <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
        <span class="ms-CommandButton-label">Command</span> 
      </button>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all CommandButton components on the page:

    <script type="text/javascript">
      var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
      for (var i = 0; i < CommandButtonElements.length; i++) {
        new fabric['CommandButton'](CommandButtonElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default CommandButton
<div class="ms-CommandButton">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label">Command</span> 
  </button>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Action CommandButton
<div class="ms-CommandButton ms-CommandButton--actionButton">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label"></span> 
  </button>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Disabled CommandButton
<div class="ms-CommandButton is-disabled">
  <button class="ms-CommandButton-button" tabIndex="-1">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label">Command</span> 
  </button>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Dropdown CommandButton
<div class="ms-CommandButton">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label">New</span> 
    <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
  </button>
  <ul class="ms-ContextualMenu is-opened ms-ContextualMenu--hasIcons">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Folder</a> 
      <i class="ms-Icon ms-Icon--Folder"></i>
    </li>
    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Plain Text Document</a> 
      <i class="ms-Icon ms-Icon--Document"></i>
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Smile</a> 
      <i class="ms-Icon ms-Icon--Emoji2"></i>
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Globe</a> 
      <i class="ms-Icon ms-Icon--Globe"></i>
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Money</a> 
      <i class="ms-Icon ms-Icon--Money"></i>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Inline CommandButton
<div class="ms-CommandButton ms-CommandButton--inline">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-green"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label">Command</span> 
  </button>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
No Label Split CommandButton
<div class="ms-CommandButton ms-CommandButton--noLabel">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label"></span> 
  </button>
  <button class="ms-CommandButton-splitIcon">
    <i class="ms-Icon ms-Icon--ChevronDown"></i>
  </button>
  <ul class="ms-ContextualMenu">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Reply</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Reply all</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Forward</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Delete</a> 
    </li>
  </ul>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Pivot CommandButton
<div class="ms-CommandButton ms-CommandButton--pivot is-active">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label">New</span> 
    <span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span> 
  </button>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Split CommandButton
<div class="ms-CommandButton">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span> 
    <span class="ms-CommandButton-label">Reply</span> 
  </button>
  <button class="ms-CommandButton-splitIcon">
    <i class="ms-Icon ms-Icon--ChevronDown"></i>
  </button>
  <ul class="ms-ContextualMenu is-opened">
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Reply</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Reply all</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-selected" tabindex="1">Forward</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link" tabindex="1">Flag</a> 
    </li>
    <li class="ms-ContextualMenu-item">
      <a class="ms-ContextualMenu-link is-disabled" tabindex="1">Delete</a> 
    </li>
  </ul>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>
Text Only CommandButton
<div class="ms-CommandButton ms-CommandButton--TextOnly">
  <button class="ms-CommandButton-button">
    <span class="ms-CommandButton-label">Command</span> 
  </button>
</div>
<script type="text/javascript">
  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
  for (var i = 0; i < CommandButtonElements.length; i++) {
    new fabric['CommandButton'](CommandButtonElements[i]);
  }
</script>

States

State Applied to Result
.is-disabled .ms-Button
When using an <a> element, apply this class to disable the button. When using a <button>, the disabled attribute can be used instead.