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