10.12.0

Avatars




Avatar

Default

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Monogram


This is used when there is no avatar for a particular user.

Bad Image Link


A monagram is used as a fallback when an invalid or missing image url is provided.

Status

Terry Johnson Status

Terry Johnson Online

Terry Johnson Away

Terry Johnson Offline

The Status prop is used to display a user's online status like popular chat apps.

Avatar Action Button

Default


Placement


Actions


On Click


Tooltip

Sophia Carden

Multiple Users

Default

+2



Reverse

+2



Size

xs
+2


xxs
+2


User avatar default size is xs or 28px, but you can pass in xxs to change avatar size to 20px.

Multiple Users Stacked

Default





+4

User

Default

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black


Anna Black


With Territory

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Text Only

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Horizontal Size

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Vertical Size

Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant