Skip to main content
Microsoft
Fabric-JS
Fabric-JS
  • Home
  • Get Started
      • Button
      • CheckBox
      • ChioceFieldGroup
      • CommandButton
      • ContextualMenu
      • Dropdown
      • Label
      • Link
      • TextField
      • Toggle
      • FacePile
      • List
      • ListItem
      • OrgChart
      • Persona
      • Table
      • Breadcrumb
      • CommandBar
      • Pivot
      • SearchBox
      • DatePicker
      • PeoplePicker
      • MessageBar
      • MessageBanner
      • ProgressIndicator
      • Spinner
      • Callout
      • Dialog
      • Overlay
      • Panel
      • PersonaCard
      • Microsoft 365
      • Azure
      • Office 365
      • Dynamics 365
      • Power Platform
      • Windows 10
      • Windows Server
      • Enterprise Mobility + Security
      • Power BI
      • Teams
      • Visual Studio
      • Microsoft Advertising
      • AI
      • Internet of Things
      • Azure Cognitive Services
      • Quantum
      • Microsoft HoloLens
      • Mixed Reality
      • Docs
      • Developer Center
      • Windows Dev Center
      • Windows IT Pro Center
      • FastTrack
      • Power Platform
      • Partner Network
      • Solution Providers
      • Partner Center
      • Cloud Hosting
      • Education
      • Financial services
      • Government
      • Health
      • Manufacturing & resources
      • Retail
      • Security
      • Licensing
      • AppSource
      • Azure Marketplace
      • Events
      • Research
    • View Sitemap
Sign in
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.

Get started

Get started with Fabric JS

Use the CDN, Bower, NPM, or Nuget to get the components and core styling.

  1. The easiest way to get Fabric is by referencing the CDN. Include the following in the <head> of 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>
    		

    To reference the latest version, just change the version number in the URL to your desired version. All versions of Fabric are on the CDN, and the latest version is 1.4.0.

  2. Copy the HTML from one of the samples into your page. For example with the button

    			<button class="ms-Button">
      <span class="ms-Button-label">Create Account</span>
    </button>
    		
  3. Add the appropriate <script> tag to your page below the references to Fabric's JavaScript to instantiate, for example, all the Button components on the page:

    			<script type="text/javascript">
    var ButtonElements = document.querySelectorAll(".ms-Button.AlertExamples");
    for(var i = 0; i < ButtonElements.length; i++) {
      new fabric["Button"](ButtonElements[i], function() {
        alert("You clicked a New User button");
      });
    }
    </script>
    		

    Or, for example add the appropriate <script> tag to your page to instantiate a single Button component on the page

    			<script type="text/javascript">
    var ButtonComponent = document.querySelector(".ms-Button.AlertExample");
    new fabric["Button"](ButtonComponent, function() {
      alert("You clicked the Create Account button");
    });
    </script>
    		
  4. You can also reference styles from Fabric Core, such as the type styles:

    			<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
    		

    For more information on assets and styles available in Fabric Core, check out the Styles documentation.

Other ways to get Fabric JS

To build Fabric JS locally, you can follow the steps outlined in the building documentation. To get Fabric via a package manager such as NuGet, npm, or Bower, you can follow the package manager documentation.

Need a component Fabric JS doesn’t have?

Check the Fabric JS Trello board and vote up the request so we can track it. If you don’t see an existing card, please file an issue in the repository and we’ll add the card for you.

Follow us
Share this page
What's new
  • Surface Duo
  • Surface Laptop Go
  • Surface Pro X
  • Surface Go 2
  • Surface Book 3
  • Microsoft 365
  • Windows 10 apps
  • HoloLens 2
Microsoft Store
  • Account profile
  • Download Center
  • Microsoft Store support
  • Returns
  • Order tracking
  • Virtual workshops and training
  • Microsoft Store Promise
  • Financing
Education
  • Microsoft in education
  • Office for students
  • Office 365 for schools
  • Deals for students & parents
  • Microsoft Azure in education
Enterprise
  • Azure
  • AppSource
  • Automotive
  • Government
  • Healthcare
  • Manufacturing
  • Financial services
  • Retail
Developer
  • Microsoft Visual Studio
  • Windows Dev Center
  • Developer Center
  • Microsoft developer program
  • Channel 9
  • Office Dev Center
  • Microsoft Garage
Company
  • Careers
  • About Microsoft
  • Company news
  • Privacy at Microsoft
  • Investors
  • Diversity and inclusion
  • Accessibility
  • Security
English (United States)
  • Sitemap
  • Contact Microsoft
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Safety & eco
  • About our ads
  • © Microsoft 2021

Sign in required


Your session has expired. Please sign-in again to continue. Unfortunately any unsaved changes will be lost.

Sign in