Multiple Users

The multiple users kit is used to show that more than one user is associated to an action or item.

Default

mulitple-users-default


let twoUsers = [andrew, picAndrew]

PBDoc(title: "xSmall") {
  PBMultipleUsers(users: twoUsers, size: .xSmall)
}

Reverse

multiple-users-reverse


let multipleUsers = [andrew, picAndrew, andrew, andrew]
let twoUsers = [andrew, picAndrew]

VStack(alignment: .leading, spacing: Spacing.small) {
  PBMultipleUsers(users: multipleUsers, size: .small, reversed: true)
  PBMultipleUsers(users: twoUsers, size: .small, reversed: true)
}

Small

mulitple-users-size


let multipleUsers = [andrew, picAndrew, andrew, andrew]

PBDoc(title: "Small") {
  PBMultipleUsers(users: multipleUsers, size: .small)
}

Props

Name Type Description Default Values
Users [PBUser] Sets the user's avatars
Size AvatarSize Changes the size of the avatars .small .xSmall .small
Reversed Bool Changes the order of the avatars false true false
Max Displayed Users Int Limits the number of avatars displayed 4

UI Samples using Multiple Users Kit

Get the full picture. See how this kit is used in our samples.