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>