Avatar

The Avatar widget is used to represent users or entities, typically displaying profile pictures or initials. It provides a flexible way to show either image content or text within different shape containers, making it perfect for user profiles, contact lists, and user identification throughout your application.

The Avatar widget automatically handles different content types and shapes, ensuring consistent presentation across your interface.


Avatar Properties

Property
Description

Child to Show

Determines the content type displayed in the avatar. Options are Text for initials/text or Image for profile pictures.

Content Types

The Avatar widget supports two content types, each with its own comprehensive property set:

Text Content

When Child to Show is set to Text, the avatar displays text content (typically user initials). All text properties are available for customization.

For complete text styling options, see the Text documentation.

Image Content

When Child to Show is set to Image, the avatar displays image content (typically profile pictures). All image properties are available for customization.

For complete image configuration options, see the Image documentation.


Shape Properties

Property
Description

Shape

Defines the avatar's geometric shape. Options are Circle for round avatars or Square for rectangular avatars.

Background Color

The background color of the avatar container, visible behind transparent images or as the background for text content.

Circle Shape Properties

When Shape is set to Circle, the following property is available:

Property
Description

Radius (Circle)

Controls the size of the circular avatar by setting the radius in pixels.

Square Shape Properties

When Shape is set to Square, the following properties are available:

Property
Description

Side (Square)

Controls the size of the square avatar by setting the side length in pixels.

Corner Radius (Square)

Rounds the corners of the square avatar. Can be set individually for each corner to create custom shapes.


Default Properties

The Avatar widget supports only Layout and Interactions sections of Default Properties.

Last updated