Class

Button

kiss.ui.Button(config)

The Button derives from Component.

Its a standard clickable button with an icon.

Constructor

# new Button(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myButton = document.createElement("a-button").init(config)

Or use the shorthand for it:

const myButton = createButton({
 text: "Click me!",
 icon: "fas fa-check",
 action: () => console.log("click!")
})

myButton.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
          type: "button",
          text: "Click me!",
          icon: "fas fa-check",
          action: () => console.log("click!")
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
action function <optional>

Action to perform when clicked. Shortcut for config.events.onclick

text string <optional>
tip string <optional>

Tip displayed when hovering the button

textAlign string <optional>
fontSize string <optional>
fontWeight string <optional>
color string <optional>
colorHover string <optional>
icon string <optional>
iconHover string <optional>
iconSize string <optional>
iconColor string <optional>
iconColorHover string <optional>
iconShadow string <optional>
iconShadowHover string <optional>
iconPosition string <optional>

Use "top" to put the icon at the top

iconPadding string <optional>
iconMargin string <optional>
background string <optional>
backgroundColor string <optional>
backgroundColorHover string <optional>
boxShadow string <optional>
boxShadowHover string <optional>
cursor string <optional>
position string <optional>
top string <optional>
left string <optional>
right string <optional>
float string <optional>
display string <optional>
flex string <optional>
width string | number <optional>
minWidth string | number <optional>
maxWidth string | number <optional>
height string | number <optional>
minHeight string | number <optional>
maxHeight string | number <optional>
margin string <optional>
padding string <optional>
border string <optional>
borderStyle string <optional>
borderWidth string <optional>
borderColor string <optional>
borderColorHover string <optional>
borderRadius string <optional>
overflow string <optional>
overflowX string <optional>
overflowY string <optional>
zIndex number <optional>
draggable boolean <optional>

View Source client/ui/elements/button.js, line 68

this

Generated markup

<a-button class="a-button">
 <span class="button-icon font-awesome-icon-class"></span>
 <span class="button-text"></span>
</a-button>

Methods

# setBackgroundColor(color)

Change the background color of the text

Parameters:
Name Type Description
color string

The new color, in hexa format

View Source client/ui/elements/button.js, line 254

this

Example
myButton.setBackgroundColor("#00aaee")

# setBorderColor(color)

Change the color of the border

Parameters:
Name Type Description
color string

The new color, in hexa format

View Source client/ui/elements/button.js, line 283

this

Example
myButton.setBorderColor("#00aaee")

# setColor(color)

Change the color of the text

Parameters:
Name Type Description
color string

The new color, in hexa format

View Source client/ui/elements/button.js, line 239

this

Example
myButton.setColor("#00aaee")

# setIcon(iconClass)

Change the icon of the button

Parameters:
Name Type Description
iconClass string

The new Font Awesome icon class

View Source client/ui/elements/button.js, line 222

this

Example
myButton.setIcon("fas fa-check")

# setIconColor(color)

Change the color of the icon

Parameters:
Name Type Description
color string

The new color, in hexa format

View Source client/ui/elements/button.js, line 268

this

Example
myButton.setIconColor("#00aaee")

# setText(text)

Change the text of the button

Parameters:
Name Type Description
text string

The new button text

View Source client/ui/elements/button.js, line 206

this

Example
myButton.setText("Click here")