Custom Buttons

15 Sep 201710 minutes to read

Essential JavaScript Button control has an option of using normal ejButton as Custom Button to give visual weight to ejButton which helps user interface to notify and differentiate the priority action button with the other normal buttons.

Custom Buttons includes six predefined button styles and each button indicates unique sign of action to the user.

List of Custom Buttons

Button Types	Class	Description
Primary Button	e-primary	Provides extra visual weight and identifies the primary action in a set of buttons
Link Button	e-link	Deemphasize a button by making it look like a link while maintaining button behavior.
Success Button	e-success	Indicates a successful or positive action.
Information Button	e-info	Indicates a informative sign action to user
Warning Button	e-warning	Indicates the warning action.
Danger Button	e-danger	Indicates the danger sign action to user.

To customize ejButton as anyone type of custom Buttons ,assign CSS class name of the custom button (For Ex:e-success) to cssClass property of ejButton.

The following steps explains you the details about customizing normal ejButton with above mentioned button types.

HTML

<div class="content-container-fluid">
        <div class="row">
            <div class="cols-sample-area">
                <div class="frame">
                    <div class="control">
                        <div class="btnsht">
                            <button id="PrimaryBtn">Primary</button>
                        </div>
                        <div class="btnsht">
                            <button id="DangerBtn">Danger</button>
                        </div>
                        <div class="btnsht">
                            <button id="InfoBtn">Information</button>
                        </div>
                        <div class="btnsht">
                            <button id="WarningBtn">Warning</button>
                        </div>
                        <div class="btnsht">
                            <button id="SuccessBtn">Success</button>
                        </div>
                        <div class="btnsht">
                            <button id="LinkBtn">Link</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JAVASCRIPT

$(function () {
            //  declaration
            $("#PrimaryBtn").ejButton({
                size: "medium",
                showRoundedCorner: true,
                cssClass: 'e-primary'
            });
            $("#DangerBtn").ejButton({
                showRoundedCorner: true,
                size: "medium",
                cssClass: 'e-danger'
            });
            $("#InfoBtn").ejButton({
                showRoundedCorner: true,
                size: "medium",
                cssClass: 'e-info'
            });
            $("#WarningBtn").ejButton({
                showRoundedCorner: true,
                size: "medium",
                cssClass: 'e-warning'
            });
            $("#LinkBtn").ejButton({
                size: "medium",
                showRoundedCorner: true,
                cssClass: 'e-link'
            });
            $("#SuccessBtn").ejButton({
                size: "medium",
                showRoundedCorner: true,
                cssClass: 'e-success'
            });
        });

CSS

.frame {
            margin: auto;
            width: 400px;
        }

        .control .btnsht {
            width: 125px;
            display: inline-block;
        }
        .e-btn.e-select.e-btn-medium{
            width:115px;
        }

Execute the above code to render the following output.

Image in Button

The Essential Studio for JavaScript has an option of using custom image in a button by assigning a CSS class with background-image to prefixIcon or suffixIcon property of ejButton.Please,refer the following below steps.

Create a custom CSS class with background-image property. Use the following syntax to apply class names.

Syntax: .e-icon .e-[icon name]

CSS

.e-icon .e-profile{
        background-image: url('profile.png');
    }

HTML

<button id="button">Profile</button>

Now,assign this custom CSS class name to prefixIcon or suffixIcon property of the ejButton.

JAVASCRIPT

$("#button").ejButton({
        contentType: "textandimage",
        prefixIcon: "e-icon e-profile",
        size: "large",
        showRoundedCorner: true
    });

Execute the above code to render the following output.