AvatarGroup
<ts-avatar-group> vv0.6.3
The ts-avatar-group component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-avatar-group size="md">Content</ts-avatar-group>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
max | max | number | undefined | — | Maximum number of visible avatars before showing an overflow indicator. |
size | size | "lg" | "md" | "sm" | "xl" | "xs" | 'md' | Size applied to all child avatars. |
| Name | Description |
|---|---|
*(default)* | Avatar elements to display in the group. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
base | The group container. |
overflow | The overflow indicator element. |
ts-avatar-group::part(base) { /* your custom styles */}<ts-avatar-group size="md">Content</ts-avatar-group>import { TsAvatarGroup } from '@tessera-ui/react';
<TsAvatarGroup size="md">Content</TsAvatarGroup>