Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 11 Mar 2024 06:36 by ADMIN
Release 2024 Q2 (May)
Dennis
Created on: 07 May 2020 18:25
Category: UI for Blazor
Type: Feature Request
29
Badge component
Similar to the Bootstrap badges https://getbootstrap.com/docs/4.0/components/badge/
6 comments
ADMIN
Nadezhda Tacheva
Posted on: 05 Jan 2023 08:22

Hi Victor,

Achieving this through a built-in functionality will be possible once the Badge component is available. 

For the time being, a possible approach is to add a custom element, style it as a red circle and position it over the desired icon with some CSS.

Regards,
Nadezhda Tacheva
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Víctor
Posted on: 29 Dec 2022 10:50

Is there no built in way to add a simple red circle to an icon? 

I think this a very basic functionality.

Needed pretty much in any app. 
ADMIN
Nadezhda Tacheva
Posted on: 06 Dec 2021 18:26

Hello,

Thank you all for your feedback! It will be taken into consideration once the component discussions are initiated.

As Enrico mentioned, the Badge component will most likely include various options for configuration apart from being a simple wrapper ( such as position, alignment, appearance ). In the meantime, you can check how a Badge component could like in its Angular version, for example - Kendo UI for Angular Badge Overview.

Regards,
Nadezhda Tacheva
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Enrico
Posted on: 30 Nov 2021 08:19

Good morning all,

in my mind Telerik badge is not only a simple span wapper but it provides the possibility to wrap other components in order to positioning the badge with some directive like: Position.Top, Postion.Bottom, etc.. It can also include animations out of the box.

Just to be clear:

<TelerikBadge Class="badge-secondary" Position="BadgePosition.TopLeft" Animation="AnimationType.FadeIn">

<MyOtherComponent/>

</TelerikBadge>

Someting similar to this Flutter package for example: badges | Flutter Package (pub.dev)


Dennis
Posted on: 26 Oct 2021 15:08

It would be nice to have the similar css syntax as Bootstrap, so <span class="badge badge-secondary">New</span> is preferred. A wrapper would be overkill. I had a discussion in https://www.telerik.com/forums/style-documentation-13585dbd6a40#1465094 and it would be very nice if the Telerik default theme adheres to the Bootstrap css class names to make switching between themes easy (and lookup). 

Benjamin
Posted on: 26 Oct 2021 14:29

Just wondering about your use-case, Dennis - What would be the timesaver, when you just could create the span instead?

Do you need some logic on it?

 

<span class="badge badge-secondary">New</span>
<TelerikBadge Class="badge-secondary">New</TelerikBadge>
Create an account Log In
View
Type
Status
Category