React UI Components Documentation

Enables or disables the button.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's image source.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'}
        imgHeight={14} imgWidth={14}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's image width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'}
        imgHeight={14} imgWidth={14}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's image height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'}
        imgHeight={14} imgWidth={14}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's image position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

'all' - for all corners

'top'- for top corners

'bottom' - for bottom corners

'left' - for left corners

'right' - for right corners

'top-right' - for top right corners

'top-left' - for top left corners

'bottom-right' - for bottom right corners

'bottom-left' - for bottom left corners

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} roundedCorners={'top'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's text position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} textPosition={'right'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's text image relation. Possible values: "imageBeforeText", "imageAboveText", "textAboveImage", "textBeforeImage" and "overlay".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} imgPosition={'left'} imgSrc={'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'}
        textImageRelation={'imageBeforeText'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the button's template as an alternative of the default styles.

'default' - the default button's template. The button's style depends only on its "theme" property value.

'primary' - dark blue button for extra visual weight.

'success' - green button for successful or positive action.

'warning' - orange button which indicates caution.

'danger' - red button which indicates a dangerous or negative action.

'inverse' - dark gray button, not tied to a semantic action or use.

'info' - blue button, not tied to a semantic action or use.

'link' - making it look like a link .

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'} template={'success'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the button's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={240} height={40} value={'Click Me!'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the button's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Button'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the button is clicked.

Code examples

Bind to the click event of jqxButton.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();  
  
  public render() {
    return (
      <JqxButton ref={this.myButton} onClick={this.onClick} 
        width={120} height={40} value={'Click Me!'}
      />
    );
  }
 
  private onClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();
 
  public componentDidMount(): void {
    this.myButton.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();
 
  public componentDidMount(): void {
    this.myButton.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();
 
  public componentDidMount(): void {
    this.myButton.current!.render();
  }
   
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, IButtonProps> {
  private myButton = React.createRef<JqxButton>();
 
  public componentDidMount(): void {
    this.myButton.current!.val('New Text');
  }
   
  
  public render() {
    return (
      <JqxButton ref={this.myButton} 
        width={120} height={40} value={'Click Me!'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);