Properties

NameTypeDefault
disabled boolean false

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);
height number | string null

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);
imgSrc string ''

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);
imgWidth number | string 16

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);
imgHeight number | string 16

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);
imgPosition ButtonPositions 'center'
ButtonPositions: "left" | "center" | "right" | "top" | "bottom" | "topLeft" | "bottomLeft" | "topRight" | "bottomRight"

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);
roundedCorners ButtonRoundedCorners all
ButtonRoundedCorners: "top" | "bottom" | "all" | "left" | "right" | "top-right" | "top-left" | "bottom-right" | "bottom-left"

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

Possible Values: 
'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);
rtl boolean false

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);
textPosition ButtonPositions ''
ButtonPositions: "left" | "center" | "right" | "top" | "bottom" | "topLeft" | "bottomLeft" | "topRight" | "bottomRight"

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);
textImageRelation ButtonTextImageRelation 'overlay'
ButtonTextImageRelation: "imageBeforeText" | "imageAboveText" | "textAboveImage" | "textBeforeImage" | "overlay"

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);
theme string '' 
/* 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);
template ButtonTemplate 'default'
ButtonTemplate: "default" | "primary" | "success" | "warning" | "danger" | "inverse" | "info" | "link"

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

Possible Values: 
'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);
width number | string null

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);
value string ''

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

Events

click Event

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

Methods

NameArgumentsReturn Type
destroy None

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);
focus None

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);
render None

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);
val value

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