Edit

Fabric Core in Office Add-ins

  • Article

Fabric Core is an open-source collection of CSS classes and Sass mixins that's intended for use in non-React Office Add-ins. Fabric Core contains basic elements of the Fluent UI design language such as icons, colors, typefaces, and grids. Fabric Core is framework independent, so it can be used with any single-page application or any server-side web UI framework. (It's called "Fabric Core" instead of "Fluent Core" for historical reasons.)

If your add-in's UI isn't React-based, you can also make use of a set of non-React components. See Use Office UI Fabric JS components.

Note

This article describes the use of Fabric Core in the context of Office Add-ins, but it's also used in a wide range of Microsoft 365 apps and extensions. For more information, see Fabric Core and the open source repo Office UI Fabric Core.

Note

While Fabric Core is the recommended library to design non-React add-ins, the team is working on Fluent UI Web Components to provide a newer solution. Built on FAST, the Fluent UI Web Components library allows you to use, customize, and build Web Components to create a more modern and standards-based UI. We invite you to test this library by completing the quick start and welcome feedback on your experience through GitHub.

Use Fabric Core: icons, fonts, colors

  1. Add the content delivery network (CDN) reference to the HTML on your page.

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">

  2. Use Fabric Core icons and fonts.

    To use a Fabric Core 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>

    For more detailed instructions, see Fluent UI Icons. To find more icons that are available in Fabric Core, use the search feature on that 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 Fabric Core, see Typography and the Colors table of contents at Colors.

Examples are included in the Samples later in this article.

Use Office UI Fabric JS components

Add-ins with non-React UIs can also use any of the many components from Office UI Fabric JS, including buttons, dialogs, pickers, and more. See the readme of the repo for instructions.

Examples are included in the Samples later in this article.

Samples

The following sample add-ins use Fabric Core and/or Office UI Fabric JS components. Some of these repos are archived, meaning that they are no longer being updated with bug or security fixes, but you can still use them to learn how to use Fabric Core and Fabric UI components.