Button
Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.
Try it out
Interact with a live demo of the ak-button component.
Installation
npm install ak-button
Using the component
HTML
This package exports the ak-button
skate component.
Import the component in your JS resource:
bundle.js
import AkButton from 'ak-button';
Now you can use the defined tag in your HTML markup:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<ak-button>testing</ak-button>
</body>
Vanilla JS
It can be used as a Constructor:
import AkButton from 'ak-button';
const myButton = new AkButton();
myButton.innerHTML = 'testing'
document.body.appendChild(myButton)
Or nested inside skate elements. For example:
import 'ak-button';
const { vdom, define } = skate;
const { element } = vdom;
const MyButton = define('my-elem', {
render() {
element('ak-button', () => {
vdom.text('My Button');
});
}
});
document.body.appendChild(new MyButton())
React
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import AkButton from 'ak-button';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(AkButton, {});
ReactDOM.render(<ReactComponent />, container);
Button
Kind: global class
new Button()
Creates instances of ak-button programmatically, or using markup.
JS Example
import Button from 'ak-button';
const button = new Button();
Button.appearance : string
Predefined appearances of an ak-button. One of:
'primary', 'standard', 'subtle', 'compact'
Kind: static property of Button
Default: "'standard'"
HTML Example
<ak-button appearance="primary"></ak-button>
JS Example
button.appearance = 'primary';
Button.type : string
Type of the ak-button. One of:
'button', 'submit'.
Kind: static property of Button
Default: "button"
HTML Example
<ak-button type="submit"></ak-button>
JS Example
button.type = 'submit';
Button.href : string
href of the ak-button.
If href is set, button will redirect to href url when clicked.
Kind: static property of Button
Default: "button"
HTML Example
<ak-button href="www.atlassian.com"></ak-button>
JS Example
button.href = 'www.atlassian.com';
Button.target : string
Standard target attribute for hyperlinks
Kind: static property of Button
HTML Example
<ak-button target="_blank"></ak-button>
JS Example
button.target = '_blank';
Button.disabled : boolean
Option to disable button and every click event
Kind: static property of Button
Default: false
HTML Example
<ak-button disabled></ak-button>
JS Example
button.disabled = true;
Button.spacing : string
Option to change button's padding. One of:
'none', 'compact'
Kind: static property of Button
Default: "'normal'"
HTML Example
<ak-button spacing="compact"></ak-button>
JS Example
button.spacing = 'none';
Button.selected : boolean
Option to make a button selected
Kind: static property of Button
Default: false
HTML Example
<ak-button selected></ak-button>
JS Example
button.selected = true;
Button.theme : boolean
Option to make have a dark look and feel of a button.
Kind: static property of Button
Default: false
HTML Example
<ak-button dark></ak-button>
JS Example
button.dark = true;
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!