Skip to main content
Version: 1.6.0

Button

Overview

The Button component allows the user to create and display buttons.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
idstring""Component id name
textstring""Text to be displayed inside the button
typestring"normal"Button design typeAvailable options:
"normal" : Gray (#f7f9fA)
"submit" : Blue (#3498db)
"alert" : Red (#e74c3c)
disabledbooleanfalseEnable/Disable the component
visiblebooleantrueShow/Hide the component

Event

Here is a list of events that can be specified:

NameTypeDescriptionRemark
clickfunctionEvent handler when clickedIt will pass the event object as the argument

Constructor

Button(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

Name
--kuc-button-width
--kuc-button-height
--kuc-button-background-color
--kuc-button-background-hover
--kuc-button-background-active
--kuc-button-background-focus
--kuc-button-font-size
--kuc-button-text-color

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs["1.x.x"];

const header = kintone.app.getHeaderMenuSpaceElement();

const button = new Kuc.Button({
text: 'Submit',
type: 'submit',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});

header.appendChild(button);

button.addEventListener('click', event => {
console.log(event);
});