Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions js/Button/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
---
layout: post
title: Getting-Started
description: getting started
platform: js
title: Getting Started with JavaScript Button Control | Syncfusion
description: Learn here all about getting started with Syncfusion Essential JavaScript Button component, it's elements and more details.
control: Button
documentation: ug
api : /api/js/ejbutton
---

# Getting Started
# Getting Started with JavaScript Button Control

This section explains you briefly on how to create a **Button** in your application with **JavaScript**. Essential JavaScript Button helps to display a Button widget within a web page and allows you to Click, Toggle Click, Reset, and Submit. The following example illustrates how to customize Button control in a Media Player and Office Ribbon Application.

The following screenshot illustrates the functionality of a Button control in Media Player and Office Ribbon Application.

![](/js/Button/Getting-Started_images/Getting-Started_img1.png)
![Getting Started with JavaScript Button.](/js/Button/Getting-Started_images/javascript-button-getting-started.png)

## Create Button Widget

Expand Down Expand Up @@ -280,7 +279,7 @@ Add the following function in **<script>** tag.

The following screenshot displays the output.

![](/js/Button/Getting-Started_images/Getting-Started_img2.png)
![JavaScript Button getting started output.](/js/Button/Getting-Started_images/javascript-button-output.png)

## Create Office Ribbon Control

Expand Down Expand Up @@ -384,9 +383,9 @@ Add Function Definition from click event to Button function.

The following screenshot displays Office Ribbon Application.

![](/js/Button/Getting-Started_images/Getting-Started_img3.png)
![JavaScript Button application.](/js/Button/Getting-Started_images/javascript-button-application.png)

The following screenshot displays **Office Ribbon** **Bold** Option.

![](/js/Button/Getting-Started_images/Getting-Started_img4.png)
![JavaScript Button display.](/js/Button/Getting-Started_images/javaScript-button-display.png)

12 changes: 6 additions & 6 deletions js/ToggleButton/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: post
title: Getting-Started
description: getting started
title: Getting Started with JavaScript Toggle Botton Control | Syncfusion
description: Learn here all about getting started with Syncfusion Essential JavaScript Toggle Button component, it's elements and more details.
platform: js
control: Toggle Button
documentation: ug
api: /api/js/ejtogglebutton
---

# Getting Started
# Getting Started with JavaScript Toggle Botton Control

This section explains briefly about how to create a **Toggle Button** in your application with **JavaScript.**

## Control structure

The HTML checkbox element can be easily configured as **Essential JavaScript Toggle Button** control. The basic rendering of **Essential JavaScript Toggle Button** is achieved by using default functionality.

![](/js/ToggleButton/Getting-Started_images/Getting-Started_img1.png)
![JavaScript Toggle Button structure.](/js/ToggleButton/Getting-Started_images/javascript-toggle-button-structure.png)



![](/js/ToggleButton/Getting-Started_images/Getting-Started_img2.png)
![JavaScript Toggle Button getting started.](/js/ToggleButton/Getting-Started_images/javascript-toggle-button-getting-started.png)



Expand Down Expand Up @@ -106,7 +106,7 @@ Output of above steps



![](/js/ToggleButton/Getting-Started_images/Getting-Started_img4.png)
![Label element in JavaScript Toggle Button.](/js/ToggleButton/Getting-Started_images/javascript-toggle-button-label.png)