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.

Telerik UI for Blazor Ninja image

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.

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

See Also

In this article