Stylish
A horizontally overlapping row of circular avatars with an optional "+N" overflow indicator, suited for showing team members, commenters, or collaborators.
This is the Finish-layer component: it supplies the Stylish avatar rendering (circular StylishAvatar with a surface-colored border) and overflow indicator to the headless Structure layout ConnectedAvatarRow, which owns arrangement and overlap geometry. Each avatar is drawn with a border that visually separates it from its neighbours when they overlap. When items.size exceeds maxVisible, the overflow indicator shows the count of hidden items as "+N" in a circle styled with overflowContainerColor and overflowContentColor. The root carries a contentDescription of "N people" for accessibility.
Parameters
The list of StylishAvatarItem data objects that describe each avatar's initials and optional image URL.
Modifier applied to the root row.
The maximum number of avatars to render before showing an overflow indicator. Defaults to 5.
Diameter of each avatar and the overflow indicator. Defaults to 40.dp.
The horizontal offset applied between consecutive avatars. Negative values cause avatars to overlap; positive values produce gaps. Defaults to (-8).dp.
The background color of each avatar. Defaults to MaterialTheme.colorScheme.surfaceContainerHigh.
The default content color (text/icon) inside each avatar. Defaults to MaterialTheme.colorScheme.onSurface.
The BorderStroke drawn around each avatar to visually separate it from its neighbours. Defaults to a 2 dp stroke in MaterialTheme.colorScheme.surface.
The background color of the overflow indicator. Defaults to MaterialTheme.colorScheme.primaryContainer.
The content color of the overflow indicator. Defaults to MaterialTheme.colorScheme.onPrimaryContainer.