Allows users to take action, such as submitting a form or dismissing a message. Primary use is in command bar or in Callout.
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. |
-
Confirm that you have references to Fabric's CSS and JavaScript on your page:
<head> <link rel="stylesheet" href="fabric.min.css"> <link rel="stylesheet" href="fabric.components.min.css"> <script src="fabric.min.js"></script> </head>
-
Copy the HTML from one of the samples above 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>
-
Replace the sample HTML content (such as the content of
.ms-CommandButton-label
) with your content. -
If you are using any of CommandButton's variants that use a dropdown, the below JavaScript is required.
<script type="text/javascript"> var CommandButtonElements = document.querySelectorAll(".ms-CommandButton"); for (var i = 0; i < CommandButtonElements.length; i++) { new fabric['CommandButton'](CommandButtonElements[i]); } </script>
ContextualMenu, ContextualHost
Focus styles are included for keyboard navigation.