Skip to content

IconButton

Overview

IconButton

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