Skip to content

Component

Avatar

A FormaUI avatar container — a circular (by default) tinted surface that centers its content.

dev.formaui.components.avatar

InitialsIconImageSmallMediumLarge

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

Row(horizontalArrangement = Arrangement.spacedBy(FormaTheme.spacing.md)) {
    FormaAvatar(initials = "AB", size = FormaAvatarSize.Small)
    FormaAvatar(initials = "CD")
    FormaAvatar(initials = "EF", size = FormaAvatarSize.Large)
    // Slot content: any composable can fill the avatar container.
    FormaAvatar { Text("★") }
}

FormaAvatar

Base avatar container (slot overload): fill content with an Image, Icon, or text, centered on a circular tinted surface.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the avatar.
sizeTypeFormaAvatarSizeDefaultFormaAvatarSize.MediumDescriptionthe avatar diameter (defaults to FormaAvatarSize.Medium).
shapeTypeShapeDefaultFormaAvatarDefaults.shapeDescriptionthe clip shape (defaults to FormaAvatarDefaults.shape, a full circle).
containerColorTypeColorDefaultMaterialTheme.colorScheme.primaryContainerDescriptionthe background color (defaults to the M3 primaryContainer).
contentColorTypeColorDefaultMaterialTheme.colorScheme.onPrimaryContainerDescriptionthe color applied to icon/text content (defaults to M3 onPrimaryContainer).
contentrequiredType@Composable BoxScope.() -> UnitDefaultrequiredDescriptionthe centered content (an Image, Icon, or text).

FormaAvatar

Initials overload — the standard fallback when a user has no profile image.

initialsrequiredTypeStringDefaultrequiredDescriptionthe initials to display (typically 1–2 characters).
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the avatar.
sizeTypeFormaAvatarSizeDefaultFormaAvatarSize.MediumDescriptionthe avatar diameter (defaults to FormaAvatarSize.Medium).
shapeTypeShapeDefaultFormaAvatarDefaults.shapeDescriptionthe clip shape (defaults to FormaAvatarDefaults.shape, a full circle).
containerColorTypeColorDefaultMaterialTheme.colorScheme.primaryContainerDescriptionthe background color (defaults to the M3 primaryContainer).
contentColorTypeColorDefaultMaterialTheme.colorScheme.onPrimaryContainerDescriptionthe initials color (defaults to M3 onPrimaryContainer).
textStyleTypeTextStyleDefaultFormaAvatarDefaults.textStyle(size)Descriptionthe initials TextStyle (defaults to FormaAvatarDefaults.textStyle for size, which keeps the type at roughly 35–40% of the avatar diameter).

Supporting API

FormaAvatarSizeenum
Avatar diameter: Small (32dp), Medium (40dp), Large (56dp); exposes a dp property.
FormaAvatarDefaultsobject
Default values for FormaAvatar; shape returns FormaTheme.shapes.full (circular); textStyle(size) maps the avatar size to the theme type scale (Small → labelMedium, Medium → titleSmall, Large → titleLarge, roughly 35–40% of the diameter).

Accessibility

The container is decorative and non-interactive; wrap it in a clickable/Modifier.semantics parent (with the person's name as the description) when it represents a tappable user.