We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is it Possible to have a Badge in the Tab Header

What I am after is to display a Badge with a count of items on the Tab Header, is this possible within the <TabHeader> tag?

1 Reply

VR Vijay Ravi Syncfusion Team March 31, 2023 06:02 PM UTC

Hi Simon,

You can achieve your requirement with help of the HeaderTemplate property of the TabItem as shown in the below code snippet.

UG: https://blazor.syncfusion.com/documentation/tabs/how-to/customize-selected-tab-styles


<SfTab CssClass="notification-tab">




                <div class="e-title fade-in">Whatsapp</div>

                <span class="e-badge e-badge-info e-badge-notification e-badge-overlap">@badgeCount</span>



                <Counter OnCountChanged="UpdateBadgeCount" />







    .notification-tab.e-tab .e-tab-header .e-tab-wrap .tab-header-container {

        position: relative;

        width: 110%;




Vijay Ravi

Attachment: tab_with_badge_9e0c22a1.zip

Live Chat Icon For mobile
Up arrow icon