Avatar

Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits.
The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.

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`

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