New to Telerik UI for Blazor? Start a free 30-day trial

Appearance Settings

Updated over 6 months ago

You can control the appearance of the Avatar by setting the following parameters:

You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.

Size

You can increase or decrease the size of the Avatar by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Avatar.Size class:

Class members	Manual declarations
`Small`	`sm`
`Medium` (default value)	`md`
`Large`	`lg`

The default value of the Size will take precedence over the values of the Width and Height parameters. Set the Size to an empty string to apply your custom Width and Height.

The built-in Avatar sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Avatar.Size)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string size = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
        <TelerikAvatar Size="@size" Type="AvatarType.Text">
            JD
        </TelerikAvatar>
        </div>
    }
}

Rounded

The Rounded parameter applies the border-radius CSS style to the Avatar to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.Avatar.Rounded class:

Class members	Manual declarations
`Small`	`sm`
`Medium`	`md`
`Large`	`lg`
`Full` (default value)	`full`

The built-in values of the Rounded attribute

@* The built-in rounded options of the Avatar.  *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Avatar.Rounded)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string rounded = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikAvatar Rounded="@rounded" Type="AvatarType.Text">
                JD
            </TelerikAvatar>
        </div>
    }
}

FillMode

The FillMode controls whether the TelerikAvatar has background or is just outlined. You can set it to a member of the Telerik.Blazor.ThemeConstants.Avatar.FillMode class:

Class members	Manual declarations
`Solid` (default value)	`solid`
`Outline`	`outline`

This setting is applicable when the AvatarType is set to Text or Icon. With the Image type, the provided image takes all the available space in the Avatar.

The built-in Fill modes

@* These are all built-in fill modes of the Avatar*@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Avatar.FillMode)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string fillmode = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikAvatar FillMode="@fillmode" Type="AvatarType.Text">
                JD
            </TelerikAvatar>
        </div>
    }
}

ThemeColor

The color of the Avatar is controlled through the ThemeColor parameter. You can set it to a member of the Telerik.Blazor.ThemeConstants.Avatar.ThemeColor class:

Class members	Manual declarations
`Base` (default value)	`base`
`Primary`	`primary`
`Secondary`	`secondary`
`Tertiary`	`tertiary`
`Info`	`info`
`Success`	`success`
`Warning`	`warning`
`Error`	`error`
`Dark`	`dark`
`Light`	`light`
`Inverse`	`inverse`

The built-in ThemeColors

@* The built-in Avatar colors *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Avatar.ThemeColor)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string themeColor = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikAvatar ThemeColor="@themeColor" Type="AvatarType.Text">
                JD
            </TelerikAvatar>
        </div>
    }
}

ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.

Next Steps

Explore the Avatar types