Edit

Fabric Core in Office Add-ins

If you're building a non-React Office Add-in, Fabric Core gives you ready-made CSS classes and Sass mixins for icons, colors, typography, and responsive grids that are all aligned with the Fluent UI design language. Because it's framework-independent, you can use Fabric Core with any single-page application or server-side web UI framework. (It's called "Fabric Core" instead of "Fluent Core" for historical reasons.)

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

To get started, add the Fabric Core stylesheet to your add-in, and then apply CSS classes for icons, fonts, and colors.

Add the stylesheet

Add the Fabric Core content delivery network (CDN) reference to the <head> of your HTML page.

<link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.0.0/css/fabric.min.css">

Use icons

To use a Fabric Core icon, add an <i> element and apply the appropriate CSS classes. You control the icon's size with font-size classes and its color with color classes. The following example renders an extra-large table icon in the theme primary color (#0078d7).

<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

The class pattern is ms-Icon--<IconName>. To browse available icons and find their names, see Fluent UI Icons. When you find an icon to use, prefix the icon name with ms-Icon--.

Use fonts and colors

Fabric Core provides CSS classes for Segoe UI font sizes (ms-font-s, ms-font-m, ms-font-l, ms-font-xl, and others) and theme-aware colors (ms-fontColor-themePrimary, ms-fontColor-neutralSecondary, and others). The following example applies a large font size and the primary theme color to a heading.

<h2 class="ms-font-l ms-fontColor-themePrimary">Sales by region</h2>
<p class="ms-font-m ms-fontColor-neutralSecondary">Updated quarterly.</p>

For the full list of available sizes, see Typography. For theme-aware and neutral colors, see Colors.

Use Office UI Fabric JS components

If your non-React add-in needs interactive UI components—buttons, dialogs, dropdowns, pickers, and more—you can use Office UI Fabric JS. This library provides pre-built, styled components that match the Office design language without requiring React.

To use a component, reference the Fabric JS script and stylesheet in your HTML, then initialize the component in JavaScript. See the repository's README for setup instructions and the full component list.

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're no longer updated with bug or security fixes, but you can still use them to learn how to apply Fabric Core and Fabric UI components.

See also

  • Last updated on