Office UI Fabric JS

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.

Button

Overview

Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.

When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.

While buttons can technically be used to navigate a user to another part of the experience, this is not recommended - unless that navigation is part of an action or their flow.

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:

<button class="ms-Button">
  <span class="ms-Button-label">Create Account</span> 
</button>

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Button components on the page:

<script type="text/javascript">
  var ButtonElements = document.querySelectorAll(".ms-Button");
  for (var i = 0; i < ButtonElements.length; i++) {
    new fabric['Button'](ButtonElements[i], function() {
      // Insert Event Here
    });
  }
</script>

Replace the sample HTML content with your content.

Variants

Normal Button

<button class="ms-Button">
  <span class="ms-Button-label">Create Account</span> 
</button>

<script type="text/javascript">
  var ButtonElements = document.querySelectorAll(".ms-Button");
  for (var i = 0; i < ButtonElements.length; i++) {
    new fabric['Button'](ButtonElements[i], function() {
      // Insert Event Here
    });
  }
</script>

Primary Button

<button class="ms-Button ms-Button--primary">
  <span class="ms-Button-label">Create Account</span> 
</button>

<script type="text/javascript">
  var ButtonElements = document.querySelectorAll(".ms-Button");
  for (var i = 0; i < ButtonElements.length; i++) {
    new fabric['Button'](ButtonElements[i], function() {
      // Insert Event Here
    });
  }
</script>

Hero Button

<button class="ms-Button ms-Button--hero">
  <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> 
  <span class="ms-Button-label">Create Account</span> 
</button>

<script type="text/javascript">
  var ButtonElements = document.querySelectorAll(".ms-Button");
  for (var i = 0; i < ButtonElements.length; i++) {
    new fabric['Button'](ButtonElements[i], function() {
      // Insert Event Here
    });
  }
</script>

Compound Button

<button class="ms-Button ms-Button--compound">
  <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span> 
  <span class="ms-Button-label">Create Account</span> 
  <span class="ms-Button-description">Description of this action this button takes</span> 
</button>

<script type="text/javascript">
  var ButtonElements = document.querySelectorAll(".ms-Button");
  for (var i = 0; i < ButtonElements.length; i++) {
    new fabric['Button'](ButtonElements[i], function() {
      // Insert Event Here
    });
  }
</script>

Small Button

<button class="ms-Button ms-Button--small">
  <span class="ms-Button-label">Create</span> 
</button>

<script type="text/javascript">
  var ButtonElements = document.querySelectorAll(".ms-Button");
  for (var i = 0; i < ButtonElements.length; i++) {
    new fabric['Button'](ButtonElements[i], function() {
      // Insert Event Here
    });
  }
</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.

Methods

Name	Parameters	Description
`disposeEvents()`	None	Removes event handlers on the button