get-started.md

title	page_title	description	slug	position
Getting Started	jQuery Button Documentation - Getting Started with the Button	Get started with the jQuery Button by Kendo UI and learn how to create, initialize, and enable the component.	getting_started_kendoui_button_widget	2

Getting Started with the Button

This guide demonstrates how to get up and running with the Kendo UI for jQuery Button.

After the completion of this guide, you will be able to achieve the following end result:

	<button id="btn">My Button</button>

	<script>    
	    $("#btn").kendoButton({
			icon: "pencil",
			badge: {
	            text: "!Note",            
	            themeColor: "warning",
	            shape: "circle"
	        }
		});
	</script>

1. Create a Button Element

First, create a <button> element on the page from which the Button component will be initialized.

<button id="btn">My Button</button>

2. Initialize the Button

While you can initialize the Button from any element and with any content, it is intuitive to use the button or the a element. When you use a button element inside a form, the default type HTML attribute for buttons is submit and clicking the button will submit the form and reload the page. To change this behavior, use an explicit type="button" HTML attribute.

In this step, you will initialize the Button from the <button> element. When you initialize the component, all settings of the Button will be provided in the script statement. You have to describe its configuration and event handlers in JavaScript.

<button id="btn">My Button</button>

<script>
    // Target the button element by using jQuery and then call the kendoButton() method.
    $("#btn").kendoButton();
</script>

Once the basic initialization is completed, you can start adding additional configurations to the Button.

3. Add an Icon

You can display an icon in the Button by configuring the icon. For more information about the variety of the icons supported by the Button, refer to the article on the [Icon Button]({% slug icons_button %}).

<button id="btn">My Button</button>

<script>    
    $("#btn").kendoButton({
		icon: "pencil"
	});
</script>

4. Add a Badge to the Button

Now you can use the badge option which allows you to display a Badge element over the Button.

<button id="btn">My Button</button>

<script>    
    $("#btn").kendoButton({
		icon: "pencil",
		badge: {
            text: "!Note",            
            themeColor: "warning",
            shape: "circle"
        }
	});
</script>

Next Steps

• [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
• Demo Page for the Button

See Also

• JavaScript API Reference of the Button
• Knowledge Base Section

<script> window.onload = function() { document.getElementsByClassName("btn-run")[0].click(); } </script>