# 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> |
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 |
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 |
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")