Avatar

The RzAvatar component is a versatile container for displaying user profile images, initials, or default placeholders. It works in conjunction with child components AvatarImage and AvatarFallback to determine what to render. You can customize its shape, size, and add an optional border. An RzIndicator can also be nested within it for status display.

Image Avatar

Displays an image using the AvatarImage child component. Shown in various sizes with the default circular shape.

Source

<RzAvatar Size="Size.ExtraSmall">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Extra Small" />
</RzAvatar>
<RzAvatar Size="Size.Small">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Small" />
</RzAvatar>
<RzAvatar Size="Size.Medium">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Medium" />
</RzAvatar>
<RzAvatar Size="Size.Large">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Large" />
</RzAvatar>
<RzAvatar Size="Size.ExtraLarge">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Extra Large" />
</RzAvatar>

Square Avatar

Set the Shape parameter of RzAvatar to AvatarShape.Square for a squared look.

Source

<RzAvatar Size="Size.ExtraSmall" Shape="AvatarShape.Square">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Square Extra Small" />
</RzAvatar>
<RzAvatar Size="Size.Small" Shape="AvatarShape.Square">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Square Small" />
</RzAvatar>
<RzAvatar Size="Size.Medium" Shape="AvatarShape.Square">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Square Medium" />
</RzAvatar>
<RzAvatar Size="Size.Large" Shape="AvatarShape.Square">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Square Large" />
</RzAvatar>
<RzAvatar Size="Size.ExtraLarge" Shape="AvatarShape.Square">
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="User 51 Square Extra Large" />
</RzAvatar>

Fallback with Initials

If AvatarImage has no source or fails to load, AvatarFallback renders its child content (e.g., initials).

Source

<RzAvatar Size="Size.ExtraSmall">
    <AvatarImage ImageSource="" />
    <AvatarFallback>JS</AvatarFallback>
</RzAvatar>
<RzAvatar Size="Size.Small">
    <AvatarImage ImageSource="" />
    <AvatarFallback>JS</AvatarFallback>
</RzAvatar>
<RzAvatar Size="Size.Medium">
    <AvatarImage ImageSource="" />
    <AvatarFallback>JS</AvatarFallback>
</RzAvatar>
<RzAvatar Size="Size.Large">
    <AvatarImage ImageSource="" />
    <AvatarFallback>JS</AvatarFallback>
</RzAvatar>
<RzAvatar Size="Size.ExtraLarge">
    <AvatarImage ImageSource="" />
    <AvatarFallback>JS</AvatarFallback>
</RzAvatar>

Fallback with Default Placeholder

If AvatarImage has no source and AvatarFallback has no child content, a default SVG placeholder is rendered.

Source

<RzAvatar Size="Size.ExtraSmall">
    <AvatarImage ImageSource="" />
    <AvatarFallback />
</RzAvatar>
<RzAvatar Size="Size.Small">
    <AvatarImage ImageSource="" />
    <AvatarFallback />
</RzAvatar>
<RzAvatar Size="Size.Medium">
    <AvatarImage ImageSource="" />
    <AvatarFallback />
</RzAvatar>
<RzAvatar Size="Size.Large">
    <AvatarImage ImageSource="" />
    <AvatarFallback />
</RzAvatar>
<RzAvatar Size="Size.ExtraLarge">
    <AvatarImage ImageSource="" />
    <AvatarFallback />
</RzAvatar>

Avatar with Indicator

Nest an RzIndicator component within RzAvatar to display a status dot. The indicator's position and color are configurable on the RzIndicator itself.

Source

<RzAvatar Size="Size.Large">
    <RzIndicator Visible Color="Colors.Green.L500" Position="IndicatorPosition.TopEnd" />
    <AvatarImage ImageSource="/images/profile/51.jpg" AlternateText="Online User" />
</RzAvatar>

<RzAvatar Size="Size.Large" Shape="AvatarShape.Square">
    <RzIndicator Visible Color="Colors.Red.L500" Position="IndicatorPosition.BottomStart" Size="Size.Large" />
    <AvatarImage ImageSource="/images/profile/64.jpg" AlternateText="Offline User Square" />
</RzAvatar>

<RzAvatar Size="Size.Medium">
    <RzIndicator Visible Color="Colors.Yellow.L400" Position="IndicatorPosition.TopStart" Size="Size.ExtraSmall" />
    <AvatarFallback>AW</AvatarFallback>
</RzAvatar>

Avatar with Badge

Use AvatarBadge inside RzAvatar to add a status indicator or icon overlay.

Source

<RzAvatar Size="Size.Medium">
    <AvatarImage ImageSource="/images/profile/68.jpg" AlternateText="Jordan" />
    <AvatarBadge />
</RzAvatar>

Avatar Group

Combine AvatarGroup and AvatarGroupCount to render overlapping team members with overflow.

Source

<AvatarGroup>
    <RzAvatar Size="Size.Medium">
        <AvatarImage ImageSource="/images/profile/90.jpg" AlternateText="Mason" />
    </RzAvatar>
    <RzAvatar Size="Size.Medium">
        <AvatarImage ImageSource="/images/profile/91.jpg" AlternateText="Noah" />
    </RzAvatar>
    <AvatarGroupCount>+4</AvatarGroupCount>
</AvatarGroup>

Avatar Component Parameters

Property	Description	Type	Default
`Shape`	`AvatarShape` – Determines the shape of the avatar (`Circle` or `Square`).	`AvatarShape`	`AvatarShape.Circle`
`Size`	`Size` – Specifies the size of the avatar (`ExtraSmall`, `Small`, `Medium`, `Large`, `ExtraLarge`).	`Size`	`Size.Medium`
`Border`	`bool` – If true, a border is applied to the avatar container. Styling for the border comes from the theme.	`bool`	`false`
`AriaLabel`	`string?` – Accessible label for the avatar container. Defaults to a localized "Avatar".	`string?`	`null`
`ChildContent`	`RenderFragment?` – Used to nest `AvatarImage`, `AvatarFallback`, and `RzIndicator` components.	`RenderFragment?`	`null`

AvatarImage Component Parameters

Property	Description	Type	Default
`ImageSource`	`string?` – The URL of the image to display. If null or empty, the image will not be rendered.	`string?`	`null`
`AlternateText`	`string?` – The alt text for the image. If not provided, it defaults to the parent `RzAvatar`'s `AriaLabel` or a localized default.	`string?`	`null`

AvatarFallback Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment?` – Content to display as fallback (e.g., initials). If not provided, a default SVG placeholder icon is shown. This component only renders if `AvatarImage` does not render an image.	`RenderFragment?`	`null`

AvatarBadge Component Parameters

Use this component inside RzAvatar to display presence dots, checkmarks, or small status glyphs.

AvatarGroup Component Parameters

AvatarGroup accepts standard element attributes and a ChildContent collection of avatars and AvatarGroupCount.

AvatarGroupCount Component Parameters

AvatarGroupCount accepts ChildContent for the overflow text (for example, +4).