Dialog

Dialogs are a powerful way to interact with the user when you want to show information or ask them to make a choice as part of the application flow. To do that, first, you import the types:

import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; 

Then, you can define a button that shows the dialog and the actual dialog:

<DefaultButton 
  onClick={this._showDialog.bind(this)}>Show Dialog</DefaultButton> 
<Dialog isOpen={this.state.showDialog} 
  type={DialogType.normal} 
  onDismiss={this._closeDialog.bind(this)} 
  title="My Dialog Title" 
  subText="Some more text here." 
  isBlocking={false} 
  containerClassName={styles.container}> 
  <DialogFooter> 
    <PrimaryButton onClick={ this._closeDialog.bind(this) }>OK</PrimaryButton> 
  </DialogFooter> 
</Dialog> 

We control the appearance of dialog through this.state.showDialog property. The buttons alter the component state...