IconButton

Overview

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	The object contains params of constructor.
options.color	String	No	Color of icon button: 'gray' 'blue' 'red' 'green' 'transparent' Default value is 'gray'.
options.size	String	No	Size of icon button: 'normal' 'small' Default value is 'normal'.
options.shape	String	No	The shape of of button. The value is one of:: 'circle' 'square' Default value is 'circle'.
options.type	String	No	The type of of button. The value is one of: 'insert' 'remove' 'close' 'file' 'right' 'left' Default value is 'insert'.
options.isDisabled	Boolean	No	The icon button will be disabled. Default value: 'false'
options.isVisible	Boolean	No	The icon button will be visible. Default value: 'true'

Sample

Javascript

var insertBtn = new kintoneUIComponent.IconButton({type: 'insert',color:'blue', size: 'small'});

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react'; 
export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' />
        );
    }
}

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' />
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setColor(color)

Change color of icon button.

Parameter

Name	Type	Required	Description
color	String	Yes	The color of the button. The value is one of the following: 'gray' 'blue' 'red' 'green' 'transparent' Default value is 'gray'.

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setColor('green');

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
     constructor(props) {
      super(props);
      this.state={
          color:"red",
      }
    }
    handleSetColor=()=>{
        this.setState({color:"blue"})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleSetColor}>Set Color</button>
                <IconButton type='insert' color={this.state.color} />
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setShape(shape)

Change shape of icon button.

Parameter

Name	Type	Required	Description
shape	String	Yes	The shape of the button. The value is one of the following: 'circle' 'square' Default value is 'circle'.

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setShape('square');

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
      super(props);
      this.state={
          color:"red",
          shape:"circle"
      }
    }
    handleSetShape=()=>{
        this.setState({shape:"square"})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleSetShape}>Set Shape</button>
                <IconButton type='insert' color={this.state.color} shape={this.state.shape}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setSize(size)

Change size of icon button.

Parameter

Name	Type	Required	Description
size	String	Yes	The size of the button. The value is one of the following: 'normal' 'small' Default value is 'normal'.

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.setSize('small');

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    constructor(props) {
      super(props);
      this.state={
          color:"red",
          size:"normal"
      }
    }
    handleSetSize=()=>{
        this.setState({size:"small"})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleSetSize}>Set Size</button>
                <IconButton type='insert' color={this.state.color} size={this.state.size}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setType(type)

Set the type of the button.

Parameter

Name	Type	Required	Description
type	String	Yes	The type of button. The value is one of following: 'insert' 'remove' 'close' 'file' 'right' 'left' Default value is 'insert'.

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.setType('remove');

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
   constructor(props) {
      super(props);
      this.state={
          color:"red",
          type:'insert'
      }
    }
    handleSetType=()=>{
        this.setState({type:"remove"})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleSetType}>Set type</button>
                <IconButton  color={this.state.color} type={this.state.type}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

on(eventName, callback)

Register callback for click event

Parameter

Name	Type	Required	Description
eventName	String	Yes	Name of event: 'click'
callback	function	Yes	callback

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.on('click', function(event) {
    console.log('on click');
});

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' onClick={this.handleClick} />
        );
    }
    handleClick = () => {
        console.log('on click');
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

show()

Display the icon button.

Parameter

None

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.show();

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
  constructor(props) {
      super(props);
      this.state={
          color:"red",
          isVisible:false
      }
    }
    handleShow=()=>{
        this.setState({isVisible:true})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleShow}>Show</button>
                <IconButton  color={this.state.color} isVisible={this.state.isVisible}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

hide()

Hide the icon button.

Parameter

None

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.hide();

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
  constructor(props) {
      super(props);
      this.state={
          color:"red",
          isVisible:true
      }
    }
    handleHide=()=>{
        this.setState({isVisible:false})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleHide}>Hide</button>
                <IconButton  color={this.state.color} isVisible={this.state.isVisible}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

disable()

Disabled the icon button.

Parameter

None

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.disable();

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
   constructor(props) {
      super(props);
      this.state={
          color:"red",
          isDisabled:false
      }
    }
    handleDisable=()=>{
        this.setState({isDisabled:true})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleDisable}>Disable</button>
                <IconButton  color={this.state.color} isDisabled={this.state.isDisabled}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

enable()

Enabled the icon button.

Parameter

None

Returns

None

Sample

Javascript

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

iconBtn.enable();

React

import { IconButton } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from "react-dom";

export default class Plugin extends React.Component {
  constructor(props) {
      super(props);
      this.state={
          color:"red",
          isDisabled:true
      }
    }
    handleEnable=()=>{
        this.setState({isDisabled:false})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleEnable}>Enable</button>
                <IconButton  color={this.state.color} isDisabled={this.state.isDisabled}/>
            </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));