© 2019 AndyH  -  all rights reserved

  • AndyH

Creating Buttons with UI Fabric


Last time we started with a simple link. Buttons are just as easy to add and can do much more. In this example I demonstrate the DefaultButton.


Ensure you have the right import in your code:

import { DefaultButton } from 'office-ui-fabric-react/lib/Button';

In the render method, add the DefaultButton component. There are several ways to use a button in the properties, here I use onClick to execute some code:

<DefaultButton      data-automation-id = "clickity-mc-clickface"      text = "Click me!"      onClick = { this._buttonClicked.bind( this ) } />

For example:

private _buttonClicked(): void {     alert('Clicked'); }

Buttons are very versatile and can be extended to for command bars and provide drop down choices. There are more button styles to use depending upon your requirements such as the PrimaryButton. Take a look at the Office UI Fabric site to discover more.