Component

Avatar

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

6 variantsThemed defaults

import dev.formaui.components.avatar.FormaAvatar

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

KOTLIN

1234567Row(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(content)

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

ParameterTypeDefaultDescription

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)

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

ParameterTypeDefaultDescription

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.

Next Badge