Button

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the button
var el = document.querySelector("#btn");
var btn = Components.Button({
    el: el,
    text: "Button",
    onClick: function(ev) {
        alert("The button was clicked.");
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the button
let el = document.querySelector("#btn");
let btn = Components.Button({
    el: el,
    text: "Button",
    onClick: (ev) => {
        alert("The button was clicked.");
    }
});

Web Component

// Return the button properties return { onClick: btnClickEvent }
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-button text="My Button">
    // Return the button properties
    return {
        onClick: function(ev) {
            alert("You clicked the button...");
        }
    }
</bs-button>

References

Button(props:IButtonProps):IButton

ButtonTypes

Name Value
Danger 1
Dark 2
Info 3
Light 4
Link 5
Primary 6
Secondary 7
Success 8
Warning 9

IButton

Name Returns Description
dispose void Destroys an element’s button.
el Element The jquery element.
toggle void Toggles push state. Gives the button the appearance that it has been activated.

IButtonProps

Name Type Description
badge IBadgeProps The badge properties. Reference the IBadgeProps interface
className string The class name to apply to button.
controls Array<string\> The aria-controls property value.
data any A data object to associate with the button.
el HTMLElement The element to render the button to.
href string The href property.
id string The id to apply to the button.
isBlock boolean Applies the block class to the button.
isExpanded boolean The aria-expanded value.
isLarge boolean Applies the large class to the button.
isLink boolean Renders the button as an anchor element.
isOutline boolean Applies the outline class to the button.
isSmall boolean Applies the small class to the button.
onClick (btn?: HTMLButtonElement) The button click event.
target string The data-target property value.
text string The button text.
toggle string The data-toggle property value.
trigger string The data-trigger property value.
type number The button type. Reference the ButtonTypes enumerator