IconButton

Overview

IconButton

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

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

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.setColor('green');

React

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

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

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:
  • 'circle'
  • 'normal'
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('normal');

React

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

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

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

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

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