New to Telerik UI for Blazor? Start a free 30-day trial
Add Badge to Container With No Children
Environment
Product | Badge for Blazor |
Description
How to add the Telerik Badge to the Telerik Avatar component or another container that cannot have child elements.
Solution
To add the Badge to the Avatar component or any other container that cannot have children, you need to wrap both the Badge and the container in an HTML element with the position: relative
, overflow: visible;
, and display: inline-block;
CSS styles.
Add the Telerik Badge to the Avatar component
<div style="position: relative; overflow: visible; display: inline-block;">
<TelerikAvatar Type="AvatarType.Text">
JD
</TelerikAvatar>
<TelerikBadge ThemeColor="primary"
VerticalAlign="@BadgeVerticalAlign.Bottom"
HorizontalAlign="@BadgeHorizontalAlign.End"
Size="sm">
Busy
</TelerikBadge>
</div>