New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Button Overview

  • Demo Configurator
Change Button Type
ToggleType
Common Button Properties
  • AutoPostBack
Specific Properties for Standart Button

About RadButton for ASP.NET AJAX

When you need the features of the standard asp Button, LinkButton and ImageButton controls enhanced with built-in text and images, toggle and split button modes, single click functionality and rich client side API, the Teleik ASP.NET Button is the control that can easily fulfill all these requirements. "Dress" it with the set of predefined skins we provide and the buttons on your web forms will have the consistent and appealing look and feel as the rest of the Telerik AJAX controls you use.

RadButton and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Rich client-side functionality
  • Command Support—RadButton has full support for Commands
  • Single click functionality—Avoid multiple postbacks/callbacks to the server
  • Icons—you can make the button more intuitive by placing an Icon next to its text
  • ImageButton—the user can easily place an image on the control
  • Customizable ToggleButton—RadButton can be used as a check box or radio button
  • Advanced Skinning—the visual appearance of the Button control can be easily customized through skins
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Button.Overview.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <asp:Panel runat="server" ID="Panel1">
                <div runat="server" id="PrimaryBtnWrapper" class="btn-wrapper">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnPrimary" runat="server" Primary="true" OnClick="btn_Click" OnClientClicking="telerikDemo.OnClientClicking"
                        Text="Primary Button" GroupName="GroupName1">
                    </telerik:RadButton>
                </div>
                <div class="btn-wrapper">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnStandard" runat="server" OnClick="btn_Click" OnClientClicking="telerikDemo.OnClientClicking"
                        Text="Standard Button" GroupName="GroupName1">
                    </telerik:RadButton>
                </div>
                <div class="btn-wrapper">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnIcon" runat="server" OnClick="btn_Click" OnClientClicking="telerikDemo.OnClientClicking"
                        Text="Standard Button With Icon" GroupName="GroupName1">
                        <Icon PrimaryIconCssClass="rbCart" />
                    </telerik:RadButton>
                </div>
                <div class="btn-wrapper">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnIcons" runat="server" OnClick="btn_Click" OnClientClicking="telerikDemo.OnClientClicking"
                        Text="Standard Button With Two Icons" GroupName="GroupName1">
                        <Icon PrimaryIconCssClass="rbNext" SecondaryIconCssClass="rbPrevious" />
                    </telerik:RadButton>
                </div>
                <div>
                    <asp:Label ID="lblButtonClickMessage" runat="server" EnableViewState="false" CssClass="demo-label"></asp:Label>
                </div>
            </asp:Panel>
        </div>
    </div>

    <telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager1" Width="700px" Modal="true"
        Height="500px" Behaviors="Maximize,Close,Move" VisibleStatusbar="true">
    </telerik:RadWindowManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnPrimary">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnStandard">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnIcon">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnIcons">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>

    </telerik:RadAjaxManager>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance