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

WebForms Badge Overview

About Telerik WebForms Badge for ASP.NET AJAX

The Badge control allows you to position, align, color, and customize a Badge component.

The current example displays a common use-case scenario for the WebForms Badge component which showcases the different colors and shapes the Badge can have.

Telerik WebForms Badge is part of Telerik UI for ASP.NET AJAX, which is a comprehensive toolset containing over 120 controls and taking care of the common functionalities, allowing you more time to focus mainly on the business-specific logic of your application.

For more information about the Telerik WebForms Badge Control, please refer to the documentation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Demos.Badge.Overview.DefaultCS" %>

<%@ 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>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <style>
        .RadToolBar {
            text-align: center;
        }
    </style>

    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" Width="375">
            <Items>
                <telerik:RadToolBarButton Text="Button">
                    <ItemTemplate>
                        <telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="false">
                            <ContentTemplate>
                                <span class="k-svg-icon k-icon">
                                    <svg viewBox="0 0 512 512">
                                        <path d="M352 128c0 53-43 96-96 96s-96-43-96-96 43-96 96-96 96 43 96 96m-96 128c-106 0-192 86-192 192 0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32 0-106-86-192-192-192"></path>
                                    </svg>
                                </span>
                                <telerik:RadBadge runat="server" Text="2" ThemeColor="Primary" Size="Small" Rounded="Small" />
                            </ContentTemplate>
                        </telerik:RadButton>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Button">
                    <ItemTemplate>
                        <telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="false">
                            <ContentTemplate>
                                <span class="k-svg-icon k-icon">
                                    <svg viewBox="0 0 512 512">
                                        <path d="M64 96c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V128c0-17.7-14.3-32-32-32zm23.7 32L256 296.3 424.3 128c11 2.9 19.7 11.6 22.6 22.6L342.6 254.9l104.3 104.3c-2.9 11-11.6 19.7-22.6 22.6L320 277.5l-64 64-64-64L87.7 381.8c-11-2.9-19.7-11.6-22.6-22.6l104.3-104.3L65.1 150.6c2.9-11 11.6-19.7 22.6-22.6"></path>
                                    </svg>
                                </span>
                                <telerik:RadBadge runat="server" Text="5" ThemeColor="Info" Size="Small" Rounded="Medium" />
                            </ContentTemplate>
                        </telerik:RadButton>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Button">
                    <ItemTemplate>
                        <telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="false">
                            <ContentTemplate>
                                See later
                                <telerik:RadBadge runat="server" Text="15" ThemeColor="Success" Size="Small" Rounded="Full" />
                            </ContentTemplate>
                        </telerik:RadButton>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Button">
                    <ItemTemplate>
                        <telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="false">
                            <ContentTemplate>
                                News
                                <telerik:RadBadge runat="server" Text="100" Max="99" ThemeColor="Warning" Size="Small" Rounded="Large" />
                            </ContentTemplate>
                        </telerik:RadButton>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance