Avatar Group

A component that displays multiple avatars as a grouped collection. Provides a space-efficient way to show a list of users with options for handling overflow and layout.

Consistent sizing and spacing of grouped avatars

Automatic stacking and overlap handling

Architecture

so-avatar-group
Slot: default
so-avatar-group-item

Reference

  • Avatar Group

    The root container that manages the layout and spacing of multiple avatars. Handles the visual arrangement and interaction between individual avatar components within the group.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the avatar group when a visible label is not present.

  • Item

    The container component that manages the display of either an image or fallback content. Handles image loading states and coordinates the presentation of the avatar system.

    • Attributes

      • alt
        string
        /
        default: -

        Alternative text description of the image for accessibility purposes. Should provide a meaningful description of the avatar.

      • name
        string
        /
        default: -

        Represents the user's name. If no image is provided, this value is used to generate initials for the fallback display.

      • size
        enum
        /
        default: md

        Determines the size of the avatar. The default size is md.

      • src
        string
        /
        default: -

        The URL of the avatar image to be displayed.

made for toddle