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.
<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>