Blazor Avatar Overview

The Blazor Avatar component is typically used to display images, icons or initials representing people or other entities.

You can set different Avatar types and customize its size, fill mode and more.

The Avatar component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Avatar

1. Use the TelerikAvatar tag to add the component to your razor page.

2. Declare your desired content (as ChildContent) inside the TelerikAvatar tag - text, icon or image. This example demonstrates Avatar with initials (text).

3. Set the Avatar Type, depending on the displayed content. In this case, we are using Text.

4. (Optional) Configure the ThemeColor of the Avatar.

Basic Avatar with text and specified ThemeColor

@*Basic Avatar configuration*@

<TelerikAvatar Type="AvatarType.Text"
               ThemeColor="@Telerik.Blazor.ThemeConstants.Avatar.ThemeColor.Info">
    JD
</TelerikAvatar>

Types

The Avatar Type defines the type of the content that the component will display - it may be text, icon or image. Read more about the specifics of the Avatar types...

Appearance

The Avatar provides multiple options for configuring its look - ThemeColor, Rounded and more. Explore the available appearance settings...

Avatar Parameters

The Blazor Avatar provides the following parameters that allow you to configure the component:

Parameter	Type	Description
Bordered	bool	Whether the Avatar will have border.
Class	string	A custom CSS class that will be rendered on the main wrapping element of the Avatar. (<div class="k-avatar>) Use it to override the theme or apply custom styles.
Height	string	The height of the Avatar. Takes precedence over the Size parameter.
Width	string	The width of the Avatar. Takes precedence over the Size parameter.
Type	AvatarType (Image)	The type of the Avatar. Read more in the [Types article].

You can find more options for customizing the Avatar styling in the Appearance article.

Next Steps

• Explore the Avatar types
• Configure the appearance options of the Avatar

See Also

• Live Demo: Avatar