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.

CommandButton

Overview

Using this Component

Variants

States

Follow us

Share this page