UserAvatar

The UserAvatar component displays a user avatar. Based on the user state, it shows either the user's profile image or their initials with a gradient background. If the user is online, an online indicator is displayed.

Usage

To use the component, pass the User object to the UserAvatar:

UserAvatar(
    user = user,
    showIndicator = true,
    modifier = Modifier.size(36.dp)
)

Depending on the state within the User object, the snippet above will produce the following UI:

Customization

The UserAvatar exposes the following properties for customization:

@Composable
fun UserAvatar(
    user: User,
    modifier: Modifier = Modifier,
    showIndicator: Boolean = false,
    showBorder: Boolean = false,
)

• user: The user whose avatar to display.
• modifier: Modifier for the root component. Useful for the component size, padding, background and similar.
• showIndicator: Whether to display the online status indicator. Defaults to false.
• showBorder: Whether to show a border around the avatar. Defaults to false.

The avatar's appearance (shape, placeholder colors, initials style) is managed internally by the component and adapts to the current theme. When no image is available, the avatar displays the user's initials with a deterministic background.