ASP.NET MVC Badge - Simple Customized Badge control

Overview

The ASP.NET MVC Badge is a pure CSS control used to convey notifications, messages, or statuses in different shapes and sizes. The Badge control can be easily integrated with ListView, Avatar, and other container controls.

Custom position

Even though badges support the conventional top and bottom positions, badge positions can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source.

• Custom position documentation

Predefined styles

Eight predefined contextual color variants are available for badges.

Types of badges

The ASP.NET MVC Badge control supports six different styles: default, circle, pill, notification, ghost, and dot.

• Types of badges documentation

UI Customization

Completely customize the ASP.NET MVC Badge attributes, like dimensions and colors.

• Badge customization documentation

Other supported frameworks

The Badge control is also available in Angular, React, Vue, and JavaScript frameworks. Check out the different Badge platforms from the links below:

• Angular Badge
• React Badge
• Vue Badge
• JavaScript Badge

ASP.NET MVC Badge Code Example

Easily get started with the ASP.NET MVC Badge using a few simple lines of CSHTML code example as demonstrated below. Also explore our ASP.NET MVC Badge Example that shows you how to render and configure a Badge in ASP.NET MVC.

@using Syncfusion.EJ2
@section ControlsSection{
    <div class="col-lg-12 control-section default">
        <div class="sample_container badge-default">
            <div class="e-btn-group e-custom-button">
                <button id="update" class="e-btn">
                    Updates
                    <!-- Notification Badge -->
                    <span class="e-badge e-badge-info e-badge-notification e-badge-overlap">14</span>
                </button>
                <button id="task" class="e-btn">
                    Tasks
                    <!-- Notification Badge -->
                    <span class="e-badge e-badge-success e-badge-notification e-badge-overlap">48</span>
                </button>
                <button id="notify" class="e-btn">
                    Notifications
                    <!-- Notification Badge -->
                    <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap">99</span>
                </button>
            </div>
        </div>
    </div>