RzAvatar
The Displays an image using the Set the If If Nest an 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.AvatarImage child component. Shown in various sizes with the default circular shape.<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>Shape parameter of RzAvatar to AvatarShape.Square for a squared look.
<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>AvatarImage has no source or fails to load, AvatarFallback renders its child content (e.g., initials).<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>AvatarImage has no source and AvatarFallback has no child content, a default SVG placeholder is rendered.<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>RzIndicator component within RzAvatar to display a status dot. The indicator's position and color are configurable on the RzIndicator itself.
<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>Property Description Shape AvatarShape – Determines the shape of the avatar ( Circle or Square). Defaults to Circle.Size Size – Specifies the size of the avatar ( ExtraSmall, Small, Medium, Large, ExtraLarge). Defaults to Medium.Border bool – If true, a border is applied to the avatar container. Defaults to false. Styling for the border comes from the theme.AriaLabel string? – Accessible label for the avatar container. Defaults to a localized "Avatar". ChildContent RenderFragment? – Used to nest AvatarImage, AvatarFallback, and RzIndicator components.Property Description ImageSource string? – The URL of the image to display. If null or empty, the image will not be rendered. AlternateText string? – The alt text for the image. If not provided, it defaults to the parent RzAvatar's AriaLabel or a localized default.Property Description 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.