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. |
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
</head>
<div class="ms-CommandButton">
<button class="ms-CommandButton-button">
<span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--circleFill"></i></span><span class="ms-CommandButton-label">Command</span>
</button>
</div>
.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['Persona'](CommandButtonElements[i]);
}
</script>
ContextualMenu, ContextualHost
Focus styles are included for keyboard navigation.