Stylish
fun StylishAvatarGroup(count: Int, modifier: Modifier = Modifier, size: Dp = 32.dp, overlap: Dp = 12.dp, ringColor: Color = MaterialTheme.colorScheme.surface, avatar: @Composable (index: Int) -> Unit = { index ->
Text(
"U$index",
style = MaterialTheme.typography.labelSmall,
color = MaterialTheme.colorScheme.onPrimaryContainer,
)
})
A stacked avatar group — the web "Avatar.Group/AvatarGroup" pattern from Ant Design and MUI.
Renders count avatars overlapping by overlap, with the surface color drawn between them so each avatar keeps a visible ring. Each avatar is composed by avatar; the default renderer shows the initials "U$index" — pass a custom lambda (e.g. using StylishAvatar) for real data.
Parameters
count
Number of avatars to display.
modifier
Modifier applied to the root row.
size
Diameter of each avatar. Defaults to 32 dp.
overlap
How much each subsequent avatar covers the previous one. Defaults to 12 dp.
ring
Color drawn as the ring between overlapping avatars. Defaults to MaterialTheme.colorScheme.surface.
avatar
Composes the avatar content at index. Defaults to initials "U$index".