# 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 |
cooldown |
number
|
<optional> |
Cooldown between clicks, in milliseconds. Default is 0. |
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> |
|
backgroundColor2 |
string
|
<optional> |
If defined, the button will be a gradient with 2 colors |
gradientDirection |
string
|
<optional> |
Set the gradient direction (only if backgroundColor2 is defined). Ex: "to right", "to top left". Default is "to right". |
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> |
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
# _resetBackgroundColor()
# _resetBorderColor()
# _resetBoxShadow()
# _resetColor()
# _resetIcon()
# _resetIconColor()
# _resetIconShadow()
# _setHoverBackgroundColor()
# _setHoverBorderColor()
# _setHoverBoxShadow()
# _setHoverColor()
# _setHoverIcon()
# _setHoverIconColor()
# _setHoverIconShadow()
# disable()
Disable the button.
- The button is grayed out
- The action will not be triggered when clicked
# enable()
Enable the button.
- The button is not grayed out anymore
- The action will be triggered when clicked
# setBackgroundColor(color, color2opt, directionopt)
Change the background color of the text
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
color |
string
|
The new color, in hexa format |
|
color2 |
string
|
<optional> |
Optional second color for a gradient background |
direction |
string
|
<optional> |
Optional direction for the gradient. Ex: "to right", "to top left". Default is "to right". |
this
Example
myButton.setBackgroundColor("#00aaee")
myButton.setBackgroundColor("#00aaee", "#ff0000")
myButton.setBackgroundColor("#00aaee", "#ff0000", "to top left")# setBorderColor(color)
Change the color of the border
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
The new color, in hexa format |
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 |
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 |
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 |
this
Example
myButton.setIconColor("#00aaee")# setText(text)
Change the text of the button
Parameters:
| Name | Type | Description |
|---|---|---|
text |
string
|
The new button text |
this
Example
myButton.setText("Click here")# setWidth(width, marginopt)
Set the button width
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
width |
*
|
Any valid CSS width value. Ex: "100px", "50%" |
|
margin |
string
|
<optional> |
Optional margin to be subtracted from the width. Ex: "10px" |
this