Custom Buttons

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

</table> 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
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module ButtonComponent {
        $(function () {
            var basicButton = new ej.Button($("#PrimaryBtn"), {
                    size: "medium",
                    showRoundedCorner: true,
                    cssClass: 'e-primary'
                });
            var basicButton1 = new ej.Button($("#DangerBtn"), {    
                    showRoundedCorner: true,
                    size: "medium",
                    cssClass: 'e-danger'
                });
           var basicButton2 = new ej.Button($("#InfoBtn"), {       
                    showRoundedCorner: true,
                    size: "medium",
                    cssClass: 'e-info'
                });
           var basicButton3 = new ej.Button($("#WarningBtn"), {  
                    showRoundedCorner: true,
                    size: "medium",
                    cssClass: 'e-warning'
                });
           var basicButton4 = new ej.Button($("#LinkBtn"), {      
                    size: "medium",
                    showRoundedCorner: true,
                    cssClass: 'e-link'
                });
           var basicButton5 = new ej.Button($("#SuccessBtn"), {          
                    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. ![](Custom-Buttons_images/custom_buttons.png) ## 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
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module ButtonComponent {
        $(function () {
            var basicButton = new ej.Button($("#button"), {
            contentType: "textandimage",
            prefixIcon: "e-icon e-profile",
            size: "large",
            showRoundedCorner: true
        });
      });
    }
    Execute the above code to render the following output. ![](Custom-Buttons_images/profile.png)
    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.