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:

Name	Type	Default	Description	Remark
className	string	""	Component class name
id	string	""	Component id name
text	string	""	Text to be displayed inside the button
type	string	"normal"	Button design type	Available options: "normal" : Gray (#f7f9fA) "submit" : Blue (#3498db) "alert" : Red (#e74c3c)
disabled	boolean	false	Enable/Disable the component
visible	boolean	true	Show/Hide the component

Event

Here is a list of events that can be specified:

Name	Type	Description	Remark
click	function	Event handler when clicked	It will pass the event object as the argument

Constructor

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

Parameter

Name	Type	Default	Description	Remark
options	object	{}	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);
});