Avatar Appearance

The Kendo UI for Angular Avatar exposes custom styling options which allow you to set its theme color, roundness, fill mode, and more aspects of its appearance.

Theme Color

The Avatar allows you to specify predefined theme colors which will be applied as background and border colors while amending the text color at the same time accordingly.

The available themeColor values are:

• (Default) primary—Applies coloring based on the primary theme color.
• secondary—Applies coloring based on the secondary theme color.
• tertiary—Applies coloring based on the tertiary theme color.
• base—Applies the base coloring value.
• info—Applies coloring based on the info theme color.
• success—Applies coloring based on the success theme color.
• warning—Applies coloring based on the warning theme color.
• error—Applies coloring based on the error theme color.
• dark—Applies coloring based on the dark theme color.
• light—Applies coloring based on the light theme color.
• inverse—Applies coloring based on the inverted theme color.
• none—Removes the styling associated with the theme color.

The following example demonstrates the Avatar theme colors in action.

Roundness

The Avatar enables you to apply different border radiuses through the rounded property.

The available rounded values are:

• small—Renders an Avatar with a small border radius.
• medium—Renders an Avatar with a medium border radius.
• large—Renders an Avatar with a more prominent border radius.
• (Default) full—When the width and height are equal, renders a circular Avatar. Otherwise, renders a pill-shaped one.
• none—Removes the styling, associated with the rounded corners. Renders an Avatar with four right angles.

The following example demonstrates how to customize the roundness of the Avatar.

Size

The Avatar allows you to customize its width and height by using the size property.

The available size values are:

• small
• (Default) medium
• large
• none—Removes the styling associated with the sizing.

To specify a custom Avatar size, use the width and height properties.

The following example demonstrates how to define the size of the Avatar.

Fill Mode

The Avatar enables you to set styling options and create solid or outline avatars by setting the fillMode property.

The available fillMode values are:

• (Default) solid
• outline
• none—Removes the styling associated with the fill mode.

You can also render an additional border around the content of an outlined avatar by setting the border property to true.

The following example demonstrates how to define the fill mode of the Avatar.

Border

The Avatar allows you to specify whether or not to render an additional border around its content by using the border property. By default, border is set to false.

Custom Content

You can also define any custom content between the <kendo-avatar> tags as an avatar.

Suggested Links

• API Reference of the Kendo UI for Angular Avatar
• Creating Custom Styles with ThemeBuilder