Buttons

Button

Module & Import

js

import { Button } from 'gadjet/dist/module/gadjet.bundle.js';

Usage

js <script defer>

import { Button } from 'gadjet/dist/module/gadjet.bundle.js';
Button.tagStyle({
    color: 'blue'
})

Note

After import Button class, it will automatically apply style on standard <button> element. However, you can extend Button and define to a custom tag name.

html

<button>Button</button>

Pin Button

Module & Import

js

import { ButtonPin } from 'gadjet/dist/module/ui/button/button-pin.js';

Usage

js <script defer>

import { ButtonPin } from 'gadjet';

ButtonPin.define('el-button-pin');
ButtonPin.tagStyle({
    color: 'blue'
})

html

<el-button-pin>+</el-button-pin>

Square Button

Module & Import

js

import { Button } from 'gadjet/dist/module/ui/button/button-square.js';

Usage

js <script defer>

import { ButtonSquare } from 'gadjet';

ButtonSquare.define('el-button-square');
ButtonSquare.tagStyle({
    color: 'blue',
    borderRadius: '4px'
});

html

<el-button-square>✕</el-button-square>

Button Grouping

Module & Import

js

import { ButtonGroup } from 'gadjet/dist/module/ui/button/button-group.js';

Usage

js <script defer>

import { ButtonGroup } from 'gadjet';

ButtonGroup.define('el-button-group');
ButtonGroup.tagStyle({
    borderRadius: '4px'
});

html

<el-button-group style="width: 10rem;">
    <button>OK</button>
    <button>Cancel</button>
</el-button-group>