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

Badge Button

The Button can accommodate a Badge that enhances the textual content and adds more context.

The Button TagHelper provides the <badge> tag for configuring the Button's Badge. You can customize the appearance of the Badge through its attributes.


<kendo-button name="buttonWithBadge">
    <badge text="+5"
           cutout-border="true"
           visible="true"
           fill="@BadgeFill.Solid"
           shape="@BadgeShape.Rectangle"
           size="@BadgeSize.Large"
           theme-color="@BadgeColor.Success"
           position="@BadgePosition.Outside"
           align="@BadgeAlign.TopEnd" />
    New registrations
</kendo-button>

The icon attribute displays the appropriate Kendo UI for jQuery font icon icon. The icon is rendered inside the badge by a span.k-icon or span.k-svg-icon element.

<kendo-button name="buttonWithBadge">
    <badge icon="save"
           fill="@BadgeFill.Solid"
           shape="@BadgeShape.Circle"
           size="@BadgeSize.Medium"
           theme-color="@BadgeColor.Success"
           position="@BadgePosition.Edge"
           align="@BadgeAlign.TopStart" />
    Save
</kendo-button>

See Also

In this article
Not finding the help you need? Improve this article