IconButton

Overview

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	The object contains params of constructor.
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.size	String	No	Size of icon button: 'large' 'small' Default value is 'large'.
options.color	String	No	Color of icon button: 'gray' 'blue' 'red' 'green' 'transparent' Default value is 'gray'.
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';

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

setType(type)

Set the type of the button.

Parameter

Name	Type	Required	Description
type	String	No	The type of of button. The value is one of: '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';

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' type='remove'/>
        );
    }
}

setSize(size)

Change size of icon button.

Parameter

Name	Type	Required	Description
size	String	No	The size of of button. The value is one of: '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';

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' />
        );
    }
}

setColor(color)

Change color of icon button.

Parameter

Name	Type	Required	Description
color	String	No	The size of of button. The value is one of: '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.setSize('small');
iconBtn.setShape('normal');
iconBtn.setColor('green');

React

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

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton text='insert' size='small' shape='normal' color='green' />
        );
    }
}

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

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

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

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' isVisible={true} />
        );
    }
}

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

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' isVisible={false} />
        );
    }
}

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

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' isDisabled={true} />
        );
    }
}

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

export default class Plugin extends React.Component {
    render() {
        return (
            <IconButton type='insert' size='small' color='blue' isDisabled={false} />
        );
    }
}