Hi, Robert
In order to achieve the desired result, you can use the Placement and Position methods, provided by the Badge API.
I will leave a code sample for you.
<span class="k-badge-container">
<span class="k-icon k-i-user k-icon-36 k-badge-overlay"></span>
@(Html.Kendo().Badge()
.Name("my-badge")
.Text("22")
.Color(BadgeColor.Success)
.Position(BadgePosition.TopEnd)
.Placement(BadgePlacement.Outside)
.Size(BadgeSize.Small)
.Shape(BadgeShape.Circle)
)
</span>
<style>
.k-icon-36 {
font-size: 36px;
text-indent: 5px;
}
</style>
You can also visit this dojo link, which follows the exact same logic in JavaScript, in order to preview the result.
https://dojo.telerik.com/iLEYiXiw
You can read more about the Badge over here.
https://docs.telerik.com/aspnet-mvc/html-helpers/layout/badge/overview
And you can also find out about the different methods the API provides here.
https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/BadgeBuilder
Let me know if you have any other questions.
Regards,
Georgi Denchev
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).