Use Office UI Fabric in Office Add-ins
If you are building an Office Add-in, we encourage you to use Office UI Fabric to create your user experience.
Fabric consists of several projects:
- Fabric React - Implements the UX components using the React framework.
- Fabric Core - Contains the core elements of the design language such as icons, colors, type, and grid. Both Fabric JS and Fabric React use Fabric Core.
The following steps walk you through the basics of using Fabric JS.
1. Add the Fabric CDN references
To reference Fabric from the CDN, add the following HTML code to your page.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css"> <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css"> <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
That's it. Now you're ready to start using Fabric in your add-in.
2. Use Fabric icons and fonts
Using icons is simple. All you have to do is use an "i" element and reference the appropriate classes. You can control the size of the icon by changing the font size. For example, the following code shows how to make an extra-large table icon that uses the themePrimary (#0078d7) color.
<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
To find more icons that are available in Office UI Fabric, use the search feature on the Icons page. When you find an icon to use in your add-in, be sure to prefix the icon name with
3. Use Fabric JS UX components
Fabric provides several UX components, like buttons or checkboxes, that you can use in your add-in. The following is a list of the Fabric JS UX components that we recommend for use in an add-in. To use one of the Fabric components in your add-in, follow the link to the Fabric documentation, and then follow the instructions in Using this component.
Note: We will add additional components over time.
- Button (Consider using the small button variant in your add-in. Add 16px of padding to small buttons to ensure a 40px minimum touch target on touch devices.)
- Date Picker (For an example that shows how to implement the Date Picker in an add-in, see the Excel Sales Tracker code sample.)
- List (Consider changing the component's default styles in the CSS.)
Updating your add-in to use Fabric JS
If you've been using a previous version of Office UI Fabric and you'd like to move to Fabric JS, make sure that you learn about, incorporate, and test the new components in your add-in. Keep the following points in mind to help you plan for your updates:
<Script>reference. All you need to do is initialize the Fabric component.
- Several components now provide functions that control the behavior of the UX component. For example, the checkbox control has a
togglefunction that switches between the checked and unchecked states.
- Some icon class names and styles have been updated.
- The most notable change is the use of the
<label>element in many components. The
<label>element controls the style of the component. You might have to update your UX code to use the
<label>element. For example, changing the value of the
<input>element's checked attribute on a Fabric JS checkbox has no effect on the checkbox. Instead, you use the
If you're looking for an end-to-end code sample that shows you how to use Fabric JS, we've got you covered. See the following resource:
If you're looking for code samples or documentation on a previous release of Fabric, see the following: