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.

CommandButton

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

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

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>

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>

Folder
Plain Text Document
Smile
Globe
Money

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>

Reply
Reply all
Forward
Flag
Delete

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>

Reply
Reply all
Forward
Flag
Delete

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.