in namespace DotVVM.Framework.Controls.Bootstrap

Renders a Bootstrap badge component.

Usage & Scenarios

Renders a Boostrap badge component.

Sample 1: Basic Badge

Place the contents of the Badge inside the control, or use the Text property.

<bs:Badge Text="100"/>


Sample 2: Badge in a Button

If you need to use the Badge inside the button, don't forget to set the ButtonTagName to Button.

Otherwise, the button would be rendered as <input type="text"> which supports only a plain text values.

<bs:Button Click="{command: Increment()}" ButtonTagName="button">
  Number of clicks: <bs:Badge Text="{value: Clicks}"/>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Badge.sample2
    public class ViewModel : DotvvmViewModelBase
        public int Clicks { get; set; } = 0;

        public void Increment()


Name Type Description Notes Default Value
property icon Text String Gets or sets the text inside the badge.
inner element
static value

HTML produced by the control