val iconContent = remember {
listOf(
AvatarType.icon(R.drawable.profile),
AvatarType.icon(R.drawable.profile)
)
}

val initialsContent = remember {
listOf(
AvatarType.Initials(text:"NB"),
AvatarType.Initials(text:"NB")
)
}

val imageContent = remember {
listOf(
AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person)), AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person))
)
}
‍
val imageContentMore = remember {
listOf(
AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person)), AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person)),
AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person))
)
}

AvatarGroup(
items = iconContent,
size = AvatarGroupSize.lg
)

AvatarGroup(
items = initialsContent,
size = AvatarGroupSize.lg
)

AvatarGroup(
items = imageContent,
size = AvatarGroupSize.lg
)

AvatarGroup(
items = imageContentMore,
size = AvatarGroupSize.lg
)

3. Size

You can edit the size with the AvatarGroupSize.xs or AvatarGroupSize.lg parameter.

val imageContent = remember {
listOf(
AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person)), AvatarType.Image(AvatarImage.Drawable(R.drawable.img_person))
)
}

AvatarGroup(
items = imageContent,
size = AvatarGroupSize.lg
)

AvatarGroup(
items = imageContent,
size = AvatarGroupSize.xs
)

Preview

Code

DLAvatarGroup(
      groupSize: DLAvatarGroupSize.lg,
      items: [
        DLAvatarItem.icon(),
        DLAvatarItem.icon(),
      ],
    ),
DLAvatarGroup(
      groupSize: DLAvatarGroupSize.lg,
      items: [
        DLAvatarItem.initials('NB'),
        DLAvatarItem.initials('NB'),
      ],
    ),
DLAvatarGroup(
      groupSize: DLAvatarGroupSize.lg,
      items: [
        DLAvatarItem.image(
          img1,
        ),
        DLAvatarItem.image(
          img2,
        ),
      ],
    ),
DLAvatarGroup(
      groupSize: DLAvatarGroupSize.lg,
      items: [
        DLAvatarItem.image(
          img1,
        ),
        DLAvatarItem.initials('2'),
      ],
    ),

Copy

Usage

Add this code example to your project to see how the component works.

DLAvatarGroup(
      groupSize: DLAvatarGroupSize.lg,
      items: [
        DLAvatarItem.icon(),
        DLAvatarItem.icon(),
      ],
    )

Copy

Examples

Size

Preview

Code

DLAvatarGroup(
      groupSize: DLAvatarGroupSize.lg,
      items: [
        DLAvatarItem.icon(),
        DLAvatarItem.icon(),
      ],
    ),
DLAvatarGroup(
      groupSize: DLAvatarGroupSize.xs,
      items: [
        DLAvatarItem.icon(),
        DLAvatarItem.icon(),
      ],
    ),

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version