Dynamic Button Component In JavaScript – button.js

button.js is a simple JavaScript button component to dynamically generate action buttons with custom styles on the app.

How to use it:

1. Import the JavaScript library button.js into the HTML.

<script src="./src/button.js"></script>

2. Render a custom action button on the page and override the default destination the page will be redirected to.

<div id="app"></div>

var btn = new Button({
    el:'#app',
    text:'My Action Button',
    destination:'https://cssscript.com'
});

3. Apply custom styles to the action button.

.custom-btn {
/* css styles here */
}

4. Override the default click event on the action button.

var btn = new Button({
    el:'#app',
    text:'My Action Button',
    destination:'https://cssscript.com',
    onClick: function(){
      // do something
    }
});

5. All default configs.

var btn = new Button({
    el:'body',
    className:'custom-btn',
    destination:'https://github.com/geobde/button.js',
    text:'Click Me',
    onClick: () => window.location = Button.prototype.defaultOptions.destination
});

Changelog:

06/22/2020

• Update