Avatar Group
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Avatar Group component is used to display profile pictures of groups or to clarify who belongs to a group.
1. Reference
This component inherits props from the Avatar Group.
2. Type
You can edit the type with the icon, image, initials or more parameter.
Image 2.1 : Type image
Image 2.2 : Type icon
Image 2.3 : Type initials
Image 2.4 : Type more
3. Size
You can edit the size with the lg, or xs parameter.
Image 3.1 : Size lg
Image 3.2 : Size xs
SwiftUI
The DLAvatarGroup component is used to display profile pictures of groups or to clarify who belongs to a group.
1. Reference
This component inherits props from the Avatar Group.
-
2. Items
You can edit the items with the .icon, .initials or .image parameter.
items: [
.icon(icon: "ic_User"),
.icon(icon: "ic_User")
],
size: .lg
)
DLAvatarGroup(
items: [
.initials(text: "NB"),
.initials(text: "NB")
],
size: .lg
)
DLAvatarGroup(
items: [
.image(image: "ic_Person"),
.image(image: "ic_Person")
],
size: .lg
)
DLAvatarGroup(
items: [
.image(image: "ic_Person"),
.initials(text: "2")
],
size: .lg
)
3. Size
You can edit the size with the .xs or .lg parameter.
items: [
.image(image: "ic_Memoji"),
.image(image: "ic_Memoji")
],
size: .lg
)
DLAvatarGroup(
items: [
.image(image: "ic_Person"),
.image(image: "ic_Person")
],
size: .xs
)
Jetpack Compose
The AvatarGroup component is used to display profile pictures of groups or to clarify who belongs to a group.
1. Reference
This component inherits props from the Avatar Group.
-
2. Items
You can edit the items with the iconContent, initialsContent or imageContent parameter.
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.
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
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?