Toggle Button
- 2 minutes to read
The Toggle Button (ToggleButton) is a button used to select one of two mutually exclusive options/values.
Button State
The Checked property specifies the button’s state. When its value changes, the Toggle Button fires the CheckedChanged event.
Button Text
Use the CheckedText and UncheckedText properties to specify the button’s text for checked and unchecked states respectively. By default, these properties are set to ON and OFF respectively.
The text can be displayed outside or inside the toggle button. Use the TextPosition property to specify this setting.
| Value | Description | Screenshot |
|---|---|---|
| Outside | Displays the text outside the toggle button. |  |
| Inside | Displays the text inside the toggle button. |  |
| None | Hides the text. |  |
using DevExpress.UITemplates.Collection.Editors.ToggleButton;
// Displays the text inside the toggle button.
toggleButton1.TextPosition = Position.Inside;
Toggle Button Size
Use the ButtonSize property to specify the size of toggle buttons.
| Value | Screenshot |
|---|---|
| Small |  |
| Default |  |
| Large |  |
Switch Thumb Customization
Use IconImageOptions property to specify a custom image as a switch thumb. You can choose an image from the DevExpress Image Gallery, which is packed with thousands of high-quality SVG and PNG icons, or you can specify your own graphics.
HTML & CSS Template Customization
Toggle Buttons are created with HTML & CSS templates. This allows you to create fully custom buttons. Template customizations are handled with our HTML Template Editor that is integrated into the Visual Studio IDE. This tool uses an embedded Syntax Editor with autocomplete, tag navigation, and preview.