JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 59
  • Score
    100M100P100Q7144F
  • License Apache-2.0

ak-button webcomponent

Package Exports

  • ak-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ak-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Commitizen friendly semantic-release Report an issue Ask in our forum

Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Example buttons

Example buttons

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' // renders <ak-button>testing</ak-button>
document.body.appendChild(myButton) // Needed to be attached to the DOM to be rendered

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())  // renders <ak-button>My Button</ak-button>

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.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.compact : boolean

Option to make a button compact

Kind: static property of Button
Default: false
HTML Example

<ak-button compact></ak-button>

JS Example

button.compact = true;

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;

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.

Community support

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!