Button

link - developer.microsoft.com/en-us/fluentui#/controls/web/button
This control allows the user to trigger an action.

Cancel.html

<button class="ms-Button" 
        id="myID" 
>Text Displayed</button> 

Cancel.js

import * as React from 'react';  
import { PrimaryButton, IButtonProps } from '@fluentui/react';  

import styles from './BET_Button_Cancel.css'  

export class BETButtonCancel extends React.Component<IButtonProps, {}> { 
  constructor() { 
    super(); 
  } 

  render() { 
    let { disabled, title } = this.props; 

    return ( 
      <div className='ms-BET-Button-Cancel'>  

<div className={styles.app}> 
  <p>This text will be blue</p> 
</div> 

        <PrimaryButton 
          data-automation-id='test'  
          disabled={ disabled } 
          title= { title } 
        > 
        Cancel 
        </PrimaryButton> 
      </div> 
    ); 
  } 
} 

Primary

import * as React from 'react';  
import { PrimaryButton, IButtonProps } from '@fluentui/react';  
import { Label } from '@fluentui/react';  

export class BETButtonPrimary extends React.Component<IButtonProps, {}> { 
  constructor() { 
    super(); 
  } 

  render() { 
    let { disabled, text, title } = this.props; 

    return ( 
      <div className='ms-BET-Button-Primary'>  

        <PrimaryButton 
          data-automation-id='test'  
          disabled={ disabled } 
          text= { text } 
          title= { title } 
          onClick={ () => alert('Clicked') }  
        /> 
      </div> 
    ); 
  } 
} 

Compound

import * as React from 'react';  
import { CompoundButton, IButtonProps } from '@fluentui/react';  
import { Label } from '@fluentui/react';  

export class BETButtonCompound extends React.Component<IButtonProps, {}> { 
  constructor() { 
    super(); 
  } 

  render() { 
    let { disabled, checked } = this.props; 

    return ( 
      <div className='ms-Button-Compound'>  
        <Label>Compound button</Label> 
        <CompoundButton 
          description='You can create a new account here.' 
          disabled={ disabled } 
          checked={ checked } 
        > 
          Create account 
        </CompoundButton> 
      </div> 
    ); 
  } 
}