Toggle button

_config.yml

@@ -366,6 +366,9 @@ navigation:
     "controls/timepicker":
         title: "TimePicker"
         position: 1
+    "controls/togglebutton":
+        title: "ToggleButton"
+        position: 1
     "controls/toolbar":
         title: "ToolBar"
         position: 1

controls/togglebutton/accessibility-and-internationalization/keyboard-support.md

@@ -0,0 +1,27 @@
+---
+title: Keyboard Support
+page_title: Keyboard Support | RadToggleButton for ASP.NET AJAX Documentation
+description: Keyboard Support
+slug: togglebutton/accessibility-and-internationalization/keyboard-support
+tags: keyboard,support
+published: True
+position: 2
+---
+
+# Keyboard Support
+
+There are several ways to use the **RadToggleButton** via the keyboard only:
+
+* Set its **TabIndex** property and use the **Tab** key to navigate to the desired button and then press the **Enter** key to invoke a click on the button.
+
+* Set its **AccessKey** property. This allows you to use the browser's shortcut combination to invoke the click ("Alt + AccessKey in IE and Chrome", "Shift + Alt + AccessKey" for Firefox, Shift + Esc + AccessKey for Opera).
+
+>note Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".
+
+## See Also
+
+ * [Live Demo: RadToggleButton Keyboard Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/keyboard-support/defaultcs.aspx)
+
+ * [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%})
+
+ * [Right-to-Left Support]({%slug togglebutton/accessibility-and-internationalization/right-to-left-support%})

controls/togglebutton/accessibility-and-internationalization/right-to-left-support.md

@@ -0,0 +1,42 @@
+---
+title: Right-to-Left Support
+page_title: Right-to-Left Support | RadToggleButton for ASP.NET AJAX Documentation
+description: Right-to-Left Support
+slug: togglebutton/accessibility-and-internationalization/right-to-left-support
+tags: right-to-left,support
+published: True
+position: 1
+---
+
+# Right-to-Left Support
+
+The **RadToggleButton** fully supports right-to-left (RTL) language locales (**Figure 1**). In order to turn on the RTL support you should set **dir=rtl to the html or body** element or at least to its parent element (**Figure 1**). You can also use the **direction:rtl** CSS property.
+
+>caption Figure 1: RadToggleButton in RTL mode.
+
+![RadToggleButton-rtl](images/togglebutton-rtl.png)
+
+>caption Example 1: Set the "direction: rtl" style to the **RadToggleButton**'s wrapper element in order to enable the RTL support for the control.
+
+````ASP.NET
+<div style="direction: rtl;">
+	<telerik:RadToggleButton ID="RadToggleButton1" runat="server">
+		<ToggleStates>
+			<telerik:ButtonToggleState Text="موافق">
+				<Icon CssClass="rbOk" />
+			</telerik:ButtonToggleState>
+			<telerik:ButtonToggleState Text="إلغاء">
+				<Icon CssClass="rbCancel" />
+			</telerik:ButtonToggleState>
+		</ToggleStates>
+	</telerik:RadToggleButton>
+</div>
+````
+
+## See Also
+
+ * [Live Demo: RadToggleButton RTL Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/righttoleft/defaultcs.aspx)
+
+ * [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%})
+
+ * [Keyboard Support]({%slug togglebutton/accessibility-and-internationalization/keyboard-support%})

controls/togglebutton/accessibility-and-internationalization/wai-aria-support.md

@@ -0,0 +1,44 @@
+---
+title: WAI-ARIA Support
+page_title: WAI-ARIA Support | RadToggleButton for ASP.NET AJAX Documentation
+description: WAI-ARIA Support
+slug: togglebutton/accessibility-and-internationalization/wai-aria-support
+tags: wai-aria,support
+published: True
+position: 3
+---
+
+# WAI-ARIA Support
+
+This article demonstrates how to enable and use the WAI-ARIA support of the **RadToggleButton** control.
+
+The [WAI-ARIA Suite](http://www.w3.org/WAI/intro/aria) defines an approach to make web content and web applications more accessible to people with disabilities. **RadToggleButton** offers WAI-ARIA support.
+
+In order to enable the WAI-ARIA support, set the **RadToggleButton** control's `EnableAriaSupport` property to `true` and, optionally, set the inner properties ([DescribedBy](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) and [Label](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label)) of the `AriaSettings` composite tag to the desired values as shown in **Example 1**.
+
+>caption **Example 1**: Enabling WAI-ARIA support for RadToggleButton
+
+````ASP.NET
+<telerik:RadToggleButton ID="RadToggleButton1" runat="server" EnableAriaSupport="true">
+	<AriaSettings DescribedBy="someElementId" Label="Some Label Value" />
+	<ToggleStates>
+		<telerik:ButtonToggleState Text="First state">
+		</telerik:ButtonToggleState>
+		<telerik:ButtonToggleState Text="Second state">
+		</telerik:ButtonToggleState>
+	</ToggleStates>
+</telerik:RadToggleButton>
+````
+
+>note The implementation of the WAI ARIA support is achieved entirely client-side (using JavaScript) by appending different attributes and appropriate WAI-ARIA roles to the DOM elements.	This is done because an HTML document containing ARIA attributes will not pass validation if they are added on the server.
+
+
+
+
+## See Also
+
+ * [Live Demo: RadToggleButton WAI-ARIA Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/wai-aria-support/defaultcs.aspx)
+
+ * [W3C: WAI-ARIA Overview](http://www.w3.org/WAI/intro/aria)
+
+

controls/togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance.md

@@ -0,0 +1,29 @@
+---
+title: WCAG 2.0 and Section 508 Accessibility Compliance
+page_title: WCAG 2.0 and Section 508 Accessibility Compliance | RadToggleButton for ASP.NET AJAX Documentation
+description: WCAG 2.0 and Section 508 Accessibility Compliance
+slug: togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance
+tags: wcag,2.0,and,section,508,accessibility,compliance
+published: True
+position: 0
+---
+
+# WCAG 2.0 and Section 508 Accessibility Compliance
+
+The interface of **RadToggleButton for ASP.NET AJAX** is level AAA accessible (in compliance with the W3C Web Accessibility Guidelines 2.0) as well as Section 508 compliant. It passes the check of the [WAVE](http://wave.webaim.org/) automated content compliance tool for Section 508 and WCAG 2.0 - Compliance Level AAA.
+
+The control is also visible in Windows High Contrast mode when rendered with Simple skin.
+
+It also offers [Keyboard support]({%slug togglebutton/accessibility-and-internationalization/keyboard-support%}).
+
+## See Also
+
+ * [Live Demo: RadToggleButton Accessibility Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/accessibility-support/defaultcs.aspx)
+
+ * [Section 508](http://www.section508.gov/)
+
+ * [Web Content Accessibility Guidelines (WCAG) 2.0](http://www.w3.org/TR/WCAG/)
+
+ * [Right-to-Left Support]({%slug togglebutton/accessibility-and-internationalization/right-to-left-support%})
+
+ * [Keyboard Support]({%slug togglebutton/accessibility-and-internationalization/keyboard-support%})

controls/togglebutton/appearance-and-styling/create-a-custom-skin.md

@@ -0,0 +1,112 @@
+---
+title: Create a Custom Skin
+page_title: Create a Custom Skin | RadToggleButton for ASP.NET AJAX Documentation
+description: Create a Custom Skin
+slug: togglebutton/appearance-and-styling/create-a-custom-skin
+tags: create,a,custom,skin
+published: True
+position: 3
+---
+
+# Create a Custom Skin
+
+Each of the controls included in the **Telerik UI for ASP.NET AJAX** suite is styled with two CSS files that are loaded in a certain order. The first file – **[ControlName].css** , also called base stylesheet, contains CSS properties and values that are common for all skins, i.e., it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In general, when creating a custom skin for a control, this file should not be edited unless the custom skin needs different sizes, padding and / or margins.
+
+The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, e.g., - **Button.Default.css**. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties and references to images, colors, borders and backgrounds.
+
+## Create a RadToggleButton Skin from an Existing One
+
+1. In your project, create a new directory named **Skins**;
+
+1. In the **Skins** folder if you already have some custom skin, most probably you have already a folder named: **MyCustomSkin** – if you don’t – create one;
+
+1. In the **Skins** folder, create a new folder named: **MyCustomSkinLite** - this is the place where your Lightweight custom skins CSS will be placed; 
+
+1. Go to **[ControlsInstallationFolder]\Skins\DefaultLite** and copy **Button.Default.css** into your **MyCustomSkinLite** folder;
+
+1. Go to **[TelerikControlsInstallationFolder]\Skins\Default** and copy the **Common** folder into your **MyCustomSkin** folder;
+
+1. Rename **Button.Default.css** to **Button.MyCustomSkin.css**;
+
+1. When you are finished you should have the following folder structure in your project:
+
+	1. **Skins/MyCustomSkin/Common/** - containing several sprites;
+
+	1. **Skins/MyCustomSkinLite/Button.MyCustomSkin.css**.
+
+1. In order to support multiple skins of **RadToggleButton** on a single page, the wrapping skin-specific class is created by the name of the control, plus underscore ("_") plus SkinName, i.e., **.RadButton_Default**, so in order to create a custom skin out of the Default skin, we should rename all occurrences of **"RadButton_Default"** in **Button.MyCustomSkin.css** to **"RadButton_MyCustomSkin"** as shown below:
+
+	![Rename Button Light](images/RenameButtonLight.png)
+
+1. Add a new server declaration of **RadToggleButton** on your page, and set **Skin="MyCustomSkin"** and **EnableEmbeddedSkins="false"**:
+
+	**ASP.NET**
+
+		<telerik:RadToggleButton runat="server" ID="RadToggleButton1" Skin="MyCustomSkin" EnableEmbeddedSkins="false">
+			<ToggleStates>
+				<telerik:ButtonToggleState Text="First state">
+				</telerik:ButtonToggleState>
+				<telerik:ButtonToggleState Text="Second State">
+				</telerik:ButtonToggleState>
+			</ToggleStates>
+		</telerik:RadToggleButton>
+
+1. Register **Button.MyCustomSkin.css** in the head section of your web page. In order to have the CSS applied correctly, the base stylesheet should come first in the DOM:
+
+	**ASP.NET**
+
+		<link href="Skins/MyCustomSkinLite/Button.MyCustomSkin.css" rel="stylesheet" type="text/css" />
+
+1. Make sure the path to the files is correct; otherwise the skin will not apply;
+
+1. Reload the page, and if the steps 1-11 have been followed correctly, you will see **RadToggleButton** running a custom Default skin set as an external resource.
+
+## Custom Skin Example
+
+The example below shows how to modify the CSS in order not only to change some colors and background colors, but also some base layout settings such as font size, element height, border-radius, etc.
+
+````ASP.NET
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head runat="server">
+	<title></title>
+	<style>
+		/* Button normal state */
+		.RadButton.RadButton_Default.rbButton {
+			background-color: #80078e;
+			background-image: linear-gradient(#4f0258, #80078e 100%);
+			border-color: #6b536e;
+			color: #fff;
+		}
+
+		/* Button hovered state */
+		.RadButton.RadButton_Default.rbButton.rbHovered {
+			background-color: #660283;
+			background-image: linear-gradient(#660283, #f2ddf8 100%);
+			border-color: #47035a;
+			color: #3a0470;
+		}
+
+	</style>
+</head>
+<body>
+	<form id="form1" runat="server">
+		<asp:ScriptManager runat="server"></asp:ScriptManager>
+		<telerik:RadToggleButton runat="server" ID="RadToggleButton1">
+			<ToggleStates>
+				<telerik:ButtonToggleState Text="First state">
+					<Icon CssClass="rbPrint" />
+				</telerik:ButtonToggleState>
+				<telerik:ButtonToggleState Text="Second State">
+				</telerik:ButtonToggleState>
+			</ToggleStates>
+		</telerik:RadToggleButton>
+	</form>
+</body>
+</html>
+````
+
+## See Also
+
+ * [Render Modes]({%slug togglebutton/mobile-support/render-modes%})

controls/togglebutton/appearance-and-styling/primary-action-button.md

@@ -0,0 +1,52 @@
+---
+title: Primary Action Button
+page_title: Primary Action Button | RadToggleButton for ASP.NET AJAX Documentation
+description: Primary Action Button
+slug: togglebutton/appearance-and-styling/primary-action-button
+tags: primary,and,secondary,action,buttons,state
+published: True
+position: 2
+---
+
+# Primary Action Button
+
+**RadToggleButton** can be a Primary Action Button (**Figure 1**).
+
+The primary action button on the form has bright and saturated colors to pop up more and catch attention easily. You should use a primary action button to make the default/preferred/main/safe operation on the form stand out. At this point the rest of the buttons with their default appearance become Secondary Action buttons and do not draw as much attention.
+
+>caption Figure 1: Primary RadToggleButton next to a default RadToggleButton.
+
+![Primary action button overview](images/primary-action-button-toggle-button.png)
+
+To switch to a primary action button, set the `Primary` property of the **RadToggleButton** control to `true` (**Example 1**). The property defaults to `false` to result in the regular (secondary) button appearance for most cases.
+
+>caption Example 1: Configure a RadToggleButton to be a primary action button.
+
+````ASP.NET
+<telerik:RadToggleButton runat="server" ID="RadToggleButton1" Primary="true">
+	<ToggleStates>
+		<telerik:ButtonToggleState Text="First Primary state">
+		</telerik:ButtonToggleState>
+		<telerik:ButtonToggleState Text="Second Primary State">
+		</telerik:ButtonToggleState>
+	</ToggleStates>
+</telerik:RadToggleButton>
+
+<telerik:RadToggleButton runat="server" ID="RadToggleButton2">
+	<ToggleStates>
+		<telerik:ButtonToggleState Text="First Default state">
+		</telerik:ButtonToggleState>
+		<telerik:ButtonToggleState Text="Second Default State">
+		</telerik:ButtonToggleState>
+	</ToggleStates>
+</telerik:RadToggleButton>
+````
+
+>note The **Primary Action Button** appearance applies only to the text and background of the push button state. If you add an image to a toggle state, **RadToggleButton** is no longer considered a button but a custom image. Thus, the borders and default backgrounds will be lost and the appearance of the control will change.
+
+
+## See Also
+
+ * [Skins]({%slug pushbutton/appearance-and-styling/skins%})
+
+ * [Create a Custom Skin]({%slug pushbutton/appearance-and-styling/create-a-custom-skin%})

controls/togglebutton/appearance-and-styling/skins.md

@@ -0,0 +1,43 @@
+---
+title: Skins
+page_title: Skins | RadToggleButton for ASP.NET AJAX Documentation
+description: Skins
+slug: togglebutton/appearance-and-styling/skins
+tags: skins
+published: True
+position: 0
+---
+
+# Skins
+
+**RadToggleButton** uses **skins** to control its overall look-and-feel. A skin is a set of images and a CSS stylesheet that can be applied to the control elements and defines their look and feel.
+
+To apply a skin to a **RadToggleButton** control, set its **Skin** property.
+
+**RadToggleButton** is installed with a number of preset skins. These are shown below:
+
+![RadToggleButton-skins](images/radtogglebutton-skins.png)
+
+## Using Custom Images in a State
+
+**RadToggleButton** allows the developer to use a [custom image for a state]({%slug togglebutton/functionality/image%}). Once this is done, the entire control is considered a custom image and it will no longer have the default push button appearance (border and backgrounds). Thus, if you mix push button states and image states, the push button states will look like plain text on the page.
+
+## Customizing Skins
+
+You can tweak the existing skins or create your own. See [Create a Custom Skin For RadToggleButton]({%slug togglebutton/appearance-and-styling/create-a-custom-skin%}) for a step-by-step walk through. To use your own skin
+
+1. Add the new CSS file to your project.
+
+1. Drag and drop the CSS file from the Project Explorer onto your Web page.
+
+1. Set the **EnableEmbeddedSkins** property of the control to **False**.
+
+The stylesheet for a **RadToggleButton** skin has the name **Button.[SkinName].css** and can be found in the **...Skins/[SkinName]** directory. For example, the stylesheet for the "Black" skin is called Button.Black.css and is located in the ...Skins/Black directory.
+
+## See Also
+
+ * [Create a Custom Skin]({%slug togglebutton/appearance-and-styling/create-a-custom-skin%})
+
+ * [Primary and Secondary Action Buttons]({%slug togglebutton/appearance-and-styling/primary-and-secondary-action-buttons%})
+
+ * [Image]({%slug togglebutton/functionality/image%})