Office UI Fabric in Office Add-ins

Office UI Fabric is a JavaScript front-end framework for building user experiences for Office and Office 365. Fabric provides visuals-focused components that you can extend, rework, and use in your Office Add-in. Because Fabric uses the Office Design Language, Fabric's UX components look like a natural extension of Office.

If you are building an add-in, we encourage you to use Office UI Fabric to create your user experience. Using Office UI Fabric is optional.

The following sections explain how to get started using Fabric to meet your requirements.

Use Fabric Core: icons, fonts, colors

Fabric Core contains basic elements of the design language such as icons, colors, type, and grid. Fabric core is framework independent. Both Fabric React and Fabric JS use Fabric Core.

To get started using Fabric Core:

  1. Add the CDN reference to the HTML on your page.

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
    
  2. Use Fabric icons and fonts.

    To use a Fabric icon, include the "i" element on your page, and then 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 ms-Icon--.

    For information about font sizes and colors that are available in Office UI Fabric, see Typography and Colors.

Use Fabric Components

Fabric provides a variety of UX components that you can use to build your add-in, including the following types of components:

  • Input components - for example, Button, Checkbox, and Toggle
  • Navigation components - for example, Pivot Breadcrumb
  • Notification components - for example, MessageBar and Callout

Not all Fabric components are recommended for use in add-ins. We provide guidance for how you can use the recommended components in this section. For example, for guidance for using a Fabric button in your add-in, see Button.

You can use different JavaScript frameworks, such as Angular or React, to build your add-in. To get started using Fabric components with your framework, see the following resources.

Framework Example
JavaScript only (no framework) Using Office UI Fabric JS in Office Add-ins.
React Using Office UI Fabric React in Office Add-ins
Angular See ngOfficeUIFabric, which is a community project with Angular 1.5 directives, and Consider wrapping Fabric components with Angular 2 components