Buttons in JTB_MD serve as essential elements for user interactions. They come with various styles, shapes, and sizes, offering flexibility in design and functionality.

Whether you need dynamic buttons to respond to user actions or static ones for a consistent look, JTB_MD provides a range of options to suit your interface requirements.

How to use

In JTB_MD, there are two different ways to create and use a button element in your project:

Manually creating the button element in HTML,
Creating a button via jtbButton plugin.

To create a button element via HTML, you just need to create a (<button>, <a>, or <input>) element and add .jtbButton class into it. (We will explain the plugin method later on this page.)

For the input elements, only button, submit and reset types are supported with JTB Buttons.

                <!-- Default button -->
<button class='jtbButton'>Button</button>

Disabling

To disable a button in the JTB_MD library, simply add the .disabled class to your button element.

                    <!-- Disabled Button -->
<button class='jtbButton disabled'>Button</button>

Icon usage

As button elements in JTB_MD uses inline-flex option as display value, feel free to add any content to them. The button automatically adjusts gaps and positions of elements within the container seamlessly, eliminating the need for any additional steps.

                    <!-- Button with icon examples -->
<button class='jtbButton'><i class='jtbIR-heart'></i> Button</button>
<button class='jtbButton'>Button <i class='jtbIR-heart'></i></button>

Styles and Appearances

Once you've create the main button element, modifying the version, shape, size etc. of buttons in JTB_MD is remarkably straightforward. To achieve this you can simply add its styling by including the appropriate additional classes, based on your customization requirements.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within buttons have been crafted to simplify your design workflow.

Versions

Within JTB_MD, besides the default version, the button component comes with three additional versions:

Inverse Version: .jtbButton-inverse An alternative version with a transparent background and visible borders, providing a distinct visual contrast.
Dashed Version: .jtbButton-dashed Another alternative with a transparent background and dashed borders, offering a unique aesthetic.
Text Version: .jtbButton-text A variant that mimics the appearance of text until hovered over, providing a subtle and interactive design.

To utilize any of these versions within JTB_MD, simply incorporate the relevant button class associated with the desired version into your button element.

                    <!-- Default version -->
<button class='jtbButton'>...</button>

<!-- Inverse Version -->
<button class='jtbButton jtbButton-inverse'>...</button>

<!-- Dashed Version -->
<button class='jtbButton jtbButton-dashed'>...</button>

<!-- Text Version -->
<button class='jtbButton jtbButton-text'>...</button>

Shapes

Likewise versions there are three additional shapes defined for buttons in JTB_MD. You can easily apply any of these by adding their corresponding classes.

Rectengular: .jtbButton-rect Generates a rectangular-shaped button with sharp edges.
Rounded: .jtbButton-rounded Generates a pill-shaped button with hard rounded corners and padding.
Circular: .jtbButton-circle Generates a circular-shaped button with hard rounded corners and no padding.

                    
<!-- Default version -->
<button class='jtbButton'>...</button>

<!-- Rectangular version -->
<button class='jtbButton jtbButton-rect'>...</button>

<!-- Rounded version -->
<button class='jtbButton jtbButton-rounded'>...</button>

<!-- Circular version -->
<button class='jtbButton jtbButton-circle' style='height: 2.5rem; width: 2.5rem;'>...</button>

Sizes

In JTB_MD, To make your button elements larger or smaller than the default, simply apply the relevant size-class to it.

.jtbButton-[ xs | sm | md | lg | xl ]

                                <!-- jtbButton-xs -->
<button class='jtbButton jtbButton-xs'>...</button>

Colors

JTB_MD enables you to utilize the predefined colors outlined in the Colors section for your buttons. To do so, simply apply the desired color class to your buttons:

                                <!-- jtbButton (Green) -->
<button class='jtbButton jtbButton-green'>...</button>

Javascript Plugin

In JTB_MD, the actions and methods that buttons can perform are defined in the jtbButton plugin. Ensure that you haven't manually removed it from your project to utilize its functionalities properly.

For detailed information on plugins, refer to the JavaScript section.

Methods

With the jtbButton plugin integrated, you can effortlessly generate and manipulate buttons on-the-fly in your project using JavaScript.

If you prefer to avoid traditional methods, such as creating elements directly in HTML, the following methods will be your best companions.

Create

To dynamically create a button, use the jtbButton() function with create method and your desired parameters. The format is $(container).jtbButton('create', { parameters }, callbackFunction); where:

$(container) represents the element in which the button will be placed,
parameters represents the object that holds button's details such as content and classes,
callbackFunction (optional) stands for the function that you want to call after the creation of your button element.

When creating a button using plugin, the method returns the freshly created element. You can assign it to a variable for further use.

                        <!-- Define Container -->
<div id='createHere'></div>

<!-- Assign Creation Function to Button -->
<button class='jtbButton' onclick='createButton()'>Create Button</button>

<!-- Function to Create Button -->
<script type='text/javascript'>
    function createButton() {
        $('#createHere').jtbButton('create', {
            html: "Yuppi!!",
            classes: "jtbButton-rounded jtbButton-red",
            // Additional parameters goes here
        });
    }
</script>

For a personalized touch that aligns with your project's design, you can customize the parameters of the jtbButton() function as outlined below:

Category	Name	Type	Default Value	Description	Example Usage
Identifiers	id	`String`	""	ID of the button element. If not specified the system automatically fills it.	`"myButtonID"`
Identifiers	classes	`String`	""	Classes to be applied to button element.	`"jtbButton-sm jtbButton-rect"`
Content	html	`String`	""	Content to be displayed in button as HTML or plain-text.	`"Click me!"`
Design	css	`String`	""	Additional CSS codes to style button element.	`"font-size:1rem; color:blue;"`
Design	disabled	`Boolean`	false	State of element.	`true`
Listeners	animSpeed	`Integer`	300	Speed of animations for methods.	`1000`
	onUpdate	`String`	""	Function that will be called after 'update' method.	`"myCustomFunc('param1');"`
	onShow	`String`	""	Function that will be called after 'show' method.	`"myCustomFunc('param1');"`
	onHide	`String`	""	Function that will be called after 'hide' method.	`"myCustomFunc('param1');"`
	onToggle	`String`	""	Function that will be called after 'toggle' method.	`"myCustomFunc('param1');"`
	onDestroy	`String`	""	Function that will be called after 'destroy' method.	`"myCustomFunc('param1');"`
	onClick	`String`	""	Function that will be called after clicking button.	`"myCustomFunc('param1');"`

Update

After creating a button element, if you wish to modify any of its defined parameters, you can invoke the jtbButton() function with update method and your new values.

At this point we need to state that the update method needs to be linked directly to button element that you want to update instead of the container that holds the button. The defined format for update is: $(button).jtbButton('update', { parameters }, callbackFunction); where:

$(button) represents the button element that you want to update,
parameters represents the object that holds button's details such as content and classes,
callbackFunction (optional) stands for the function that you want to call after the update action.

                        /*----- Update the button element -----*/
$('#buttonID').jtbButton('update', {
    // Parameters goes here
});

Show

To make a specific button visible on your DOM, you can invoke the plugin with the "show" parameter. Unlike the previous two methods, show method has no attribute as parameters. So you can trigger the method as: $(button).jtbButton('show', callbackFunction); where:

$(button) represents the button element that you want to make visible,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Show hidden button -----*/
$("#buttonID").jtbButton("show");

Hide

To hide a specific button on your DOM, utilize the jtbButton() function with the "hide" parameter. Like the "show" method, "hide" has no attribute as parameters. So you can trigger the method as: $(button).jtbButton('hide', callbackFunction); where:

$(button) represents the button element that you want to make hidden,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Hide buttons -----*/
$("#buttonID").jtbButton("hide");

Toggle

To toggle visibility of a specific button on your DOM (hide if visible and make it visible if hidden), utilize the jtbButton() function with the "toggle" parameter. Like the previous two methods, "toggle" has no attribute as parameters. So you can trigger the method as: $(button).jtbButton('toggle', callbackFunction); where:

$(button) represents the button element that you want to toggle visibility,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To Change visibility of button -----*/
$("#buttonID").jtbButton("toggle");

Destroy

To permanently remove your button element from the DOM, use the jtbButton() function with the "destroy" parameter. Please be aware that after destruction, the element is completely removed from the HTML code and cannot be restored. You can trigger the "destroy" method as: $(button).jtbButton('destroy', callbackFunction); where:

$(button) represents the button element that you want to destroy,
callbackFunction (optional) stands for the function that you want to call after the visibility fully changed.

                        /*----- To remove an button completely -----*/
$("#buttonID").jtbButton("destroy");

Callbacks

Throughout the process of creating buttons and using methods via the plugin, you can execute additional functions after the operation by providing additional parameter to the jtbButton() function.

The jtbButton plugin offers three ways to specify a callback function. Since one of them is defining the listeners for element as attributes on their html tags such as onUpdate="console.log('updated');" and you've already saw that we do not go over them again. Here are the two additional methods:

Create a function elsewhere and call it inside jtbButton().

                    /*-----  Toggle Button and callback -----*/
$("#buttonID").jtbButton("toggle", showProcessDone);

/*------ Define showProcessDone in here -------*/
function showProcessDone(){
	alert('Process done boss.');
}

Define the function itself inside jtbButton().

                    /*----- Toggle Button and callback -----*/
$("#buttonID").jtbButton("toggle", function(){
	alert("Process done boss.");
});