Button



Cancel.html

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

Cancel.js

import * as React from 'react';  
import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';

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 'office-ui-fabric-react/lib/Button';
import { Label } from 'office-ui-fabric-react/lib/Label';

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 'office-ui-fabric-react/lib/Button';
import { Label } from 'office-ui-fabric-react/lib/Label';

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>
    );
  }
}


© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext