Badges overlaying icons

[Robert]

Trying to find a simple example of a badge where it is overlaying an icon, not next to a button etc.  A badge example similar to every other "badge" on the web.  Even on this Telerik site, the shopping cart with the "0" items badge overlaid on top.

[Georgi Denchev]

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; /* Sets icon size to 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

[Robert]

Thanks for the example.  Is there a way to set the color to an RGB value:

.ThemeColor("#DE5A43")

does not work, it wants an enumeration of BadgeColor

[Georgi Denchev]

Hello, Robert

You are correct, ThemeColor accepts only predefined enumeration values.

What you could do instead, is set the background and border colors of the badge, using css.

#badge {
      border-color: #000;
      background-color: #DE5A43;
}

And if you want to change the color of the text inside the badge as well:

#badge {
      border-color: #000;
      background-color: #DE5A43;
      color: #FFF;
}

You may find the updated dojo here - https://dojo.telerik.com/iLEYiXiw/3

 

Regards,
Georgi Denchev
Progress Telerik