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.
Creating Blazor Avatar
Use the
TelerikAvatar
tag to add the component to your razor page.Declare your desired content (as
ChildContent
) inside theTelerikAvatar
tag - text, icon or image. This example demonstrates Avatar with initials (text).Set the Avatar
Type
, depending on the displayed content. In this case, we are usingText
.(Optional) Configure the
ThemeColor
of the Avatar.
@*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.