Skip to content
This repository has been archived by the owner on Mar 26, 2019. It is now read-only.

Latest commit

 

History

History
109 lines (59 loc) · 3.26 KB

CommandButton.md

File metadata and controls

109 lines (59 loc) · 3.26 KB
Raw

CommandButton

Allows users to take action, such as submitting a form or dismissing a message. Primary use is in command bar or in Callout.

Variants

Default

CommandButton example

Action Button

CommandButton example

Disabled

CommandButton example

Dropdown

CommandButton example

Inline

CommandButton example

No Label

CommandButton example

No Label Split

CommandButton example

Pivot

CommandButton example

Split

CommandButton example

Text Only

CommandButton example

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.

Using this component

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

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

  3. Replace the sample HTML content (such as the content of .ms-CommandButton-label) with your content.

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

Dependencies

ContextualMenu, ContextualHost

Accessibility

Focus styles are included for keyboard navigation.