User

Avatar

Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBAvatar(image: Image("andrew", bundle: .module), size: .xxSmall, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall, status: .away)
  PBAvatar(image: Image("andrew", bundle: .module), size: .small, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away)
  PBAvatar(image: Image("andrew", bundle: .module), size: .large, status: .online)
  PBAvatar(image: Image("andrew", bundle: .module), size: .xLarge, status: .offline)
 }

Monogram

VStack(alignment: .leading, spacing: Spacing.small) {
  PBAvatar(name: "Tim Wenhold", size: .xxSmall, status: .online)
  PBAvatar(name: "Tim Wenhold", size: .xSmall, status: .away)
  PBAvatar(name: "Tim Wenhold", size: .small, status: .online)
  PBAvatar(name: "Tim Wenhold", size: .medium, status: .away)
  PBAvatar(name: "Tim Wenhold", size: .large, status: .online)
  PBAvatar(name: "Tim", size: .xLarge, status: .offline)
 }

Props

Name	Type	Description	Default	Values
Image	`Image`	Sets the Avatar image
Name	`String`	Used to display user's initails when image is blank
Size	`Size`	Adjusts the Avatar image size	`.medium`	`.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge`
Status	`PresenceStatus`	Sets user's activity status		`away` `offline` `online`
Wrapped	`Bool`	Displays the wrapped variant	`false`	`true` `false`

Multiple Users

Default


let twoUsers = [andrew, picAndrew]

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

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


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`

Multiple Users Stacked

Default


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

HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser, size: .default)
  PBMultipleUsersStacked(users: twoUsers, size: .default)
  PBMultipleUsersStacked(users: multipleUsers, size: .default)
}

Small


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

HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser)
  PBMultipleUsersStacked(users: twoUsers)
  PBMultipleUsersStacked(users: multipleUsers)
}

xSmall


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

 HStack(spacing: Spacing.xSmall) {
  PBMultipleUsersStacked(users: oneUser, size: .xSmall)
  PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
  PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
}

Props

Name	Type	Description	Default	Values
Users	`[PBUser]`	Sets the user's avatars
Size	`Size`	Changes the size of the avatars	`.small`	`.default` `.small` `.xSmall`

User

Horizontal


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .small
  )
}

Vertical


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    orientation: .vertical,
    size: .small,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    orientation: .vertical,
    title: title
  )

  PBUser(
    name: name,
    image: img,
    orientation: .vertical,
    size: .large,
    title: title
  )
}

Text Only


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(spacing: Spacing.small) {
  PBUser(
    name: name,
    displayAvatar: false,
    size: .large,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    displayAvatar: false,
    territory: "PHL",
    title: title
  )
}

Horizontal Size


let img = Image("andrew", bundle: .module)
let name = "Andrew K"
let title = "Rebels Developer"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,
    image: img,
    size: .small,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title
  )

  PBUser(
    name: name,
    image: img,
    size: .large,
    territory: "PHL",
    title: title
  )
}

Presence Indicator

VStack(alignment: .leading, spacing: Spacing.small) {
  PBUser(
    name: name,

    image: img,
    size: .small,
    territory: "PHL",
    title: title,
    status: .online
  )
  PBUser(
    name: name,
    image: img,
    territory: "PHL",
    title: title,
    status: .away
  )
  PBUser(
    name: name,
    image: img,
    size: .large,
    territory: "PHL",
    title: title,
    status: .offline
  )
}

Props

Name	Type	Description	Default	Values
name	`String`	Sets the User's name
displayAvatar	`Bool`	Displays the User's avatar	`true`	`true` `false`
image	`Image`	Sets image for the avatar
orientation	`Orientation`	Changes the orientation of the User	`.horizontal`	`.horizontal` `.verticle`
size	`UserAvatarSize`	Changes the size of the User	`.medium`	`.small` `.medium` `.large`
territory	`String`	Adds the User's territory
title	`String`	Adds a title
status	`PBAvatar.PresenceStatus?`	An idicator for the current status of the user	`.none`	`.online` `.away` `.offline`

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat