Blazor Avatar - Overview

The Telerik UI for Blazor Avatar component makes the sizing and formatting of pictures, initials, or icons a breeze. It exposes three different types - Image, Icon and Text. The Avatar accepts arbitrary HTML and applies styling over it depending on the chosen type. To follow the accessibility guidelines, specifying additional attributes such as the alt tag is fully customizable via the custom HTML that is passed to the content of the component. The avatar can also be used as a template and it can accept a RenderFragment and be used in a loop or nested within other components.

It is used to easily display content when building forms, profile pages navbar menus. Through the exposed appearance configuration options, the avatar can fit and integrate with any application design. You can customize its size, roundness, fill mode, and coloring.

Apart from the built-in size options (small, medium, large), you can set custom width and height to comply with any design requirements. To go with the flow of your page, specify the Rounded parameter - the outlook of the Avatar varies from a rectangular to a complete circle. The ThemeColor parameter can be set to a handful of options so that the coloring goes with the outlook of the page.

The FillMode parameter mainly targets the Icon and Text avatar types. It controls the coloring of the background (solid) or the icon/text (outline). The outline option usually goes hand-in-hand with the Bordered parameter. It sets a border around the avatar and accents the text/icon displayed within. The color depends on the ThemeColor parameter.