Skip to main content
Version: 1.17.1

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 buttonIf content is unspecified, the value of text will be displayed
In other cases, the text will be ignored
typestring"normal"Button design typeAvailable options:
"normal" : Gray (#f7f9fA)
"submit" : Blue (#3498db)
"alert" : Red (#e74c3c)
content *1string/HTMLElement""The DOM inside buttonIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
disabledbooleanfalseEnable/Disable the component
visiblebooleantrueShow/Hide the component
caution

*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

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-color-hover
--kuc-button-background-color-active
--kuc-button-background-color-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',
content: `<div>
<svg>...</svg>
<span>Search</span>
</div>;`,
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false
});
header.appendChild(button);

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