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	`""`
nameFont	`Typography`	Font styling for the user's name	`.init(font: .title4, variant: .bold)`
image	`Image?`	Sets image for the avatar	`nil`
orientation	`Orientation`	Changes the orientation of the User	`.horizontal`	`.horizontal` `.vertical`
size	`Size`	Changes the size of the User	`.medium`	`.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge`
territory	`String?`	Adds the User's territory	`nil`
title	`String?`	Adds a title	`nil`
subtitle	`AnyView?`	Adds a subtitle view	`nil`
status	`PBOnlineStatus.Status?`	An indicator for the current status of the user	`nil`	`.online` `.away` `.offline`
displayAvatar	`Bool`	Displays the User's avatar	`true`	`true` `false`
territoryTitleFont	`PBFont`	Font for territory and title text	`.subcaption`	`.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4`
isActive	`Bool`	Sets whether the user is active	`true`	`true` `false`
hasInactiveBadge	`Bool`	Shows inactive badge when user is not active	`false`	`true` `false`
spacing	`CGFloat`	Controls spacing between elements	`Spacing.small`	`.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge`

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

Github

Connect Chat