Avatar
Display user images and badges on Thumbtack
Avatar variations
Avatars are available as two components: UserAvatar
and EntityAvatar
.
<div className="flex"> <div className="mr3"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=49" size="xlarge" /> </div> <div> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=55" size="xlarge" /> </div> </div>
UserAvatar
is for people or users whereas EntityAvatar
is for companies, businesses, or services.
Avatar sizes
Both UserAvatar
and EntityAvatar
are available in five sizes ranging from xlarge
to xsmall
.
<> <div className="flex items-center mb4"> <div className="mr3"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=16" size="xlarge" /> </div> <div className="mr3"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=6" size="large" /> </div> <div className="mr3"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=7" size="medium" /> </div> <div className="mr3"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=10" size="small" /> </div> <div className="mr3"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=12" size="xsmall" /> </div> </div> <div className="flex items-center"> <div className="mr3"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=64" size="xlarge" /> </div> <div className="mr3"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=22" size="large" /> </div> <div className="mr3"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=32" size="medium" /> </div> <div className="mr3"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=34" size="small" /> </div> <div className="mr3"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=38" size="xsmall" /> </div> </div> </>
Avatars without images
Avatars without images can display the user or entity’s initials instead. The initials are assigned to a color based on the first letter in the initials
prop.
<> <div className="flex mb4"> <div className="mr2"> <UserAvatar initials="AA" size="large" /> </div> <div className="mr2"> <UserAvatar initials="BA" size="large" /> </div> <div className="mr2"> <UserAvatar initials="CA" size="large" /> </div> <div className="mr2"> <UserAvatar initials="DA" size="large" /> </div> <div className="mr2"> <UserAvatar initials="EA" size="large" /> </div> <div> <UserAvatar initials="HA" size="large" /> </div> </div> <div className="flex"> <div className="mr2"> <EntityAvatar initial="A" size="large" /> </div> <div className="mr2"> <EntityAvatar initial="B" size="large" /> </div> <div className="mr2"> <EntityAvatar initial="C" size="large" /> </div> <div className="mr2"> <EntityAvatar initial="D" size="large" /> </div> <div className="mr2"> <EntityAvatar initial="E" size="large" /> </div> <div> <EntityAvatar initial="F" size="large" /> </div> </div> </>
Avatar badges
Deprecated
Badges can be added to avatars to denote information including hired status and online status.
Online
This badge indicates that a user or entity is online.
<div> <div className="flex items-center mb4"> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=51" isOnline size="xlarge" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=51" isOnline size="large" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=51" isOnline size="medium" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=51" isOnline size="small" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=51" isOnline size="xsmall" /> </div> </div> <div className="flex items-center"> <div className="mr2"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=59" isOnline size="xlarge" /> </div> <div className="mr2"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=59" isOnline size="large" /> </div> <div className="mr2"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=59" isOnline size="medium" /> </div> <div className="mr2"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=59" isOnline size="small" /> </div> <div className="mr2"> <EntityAvatar imageUrl="https://i.pravatar.cc/140?img=59" isOnline size="xsmall" /> </div> </div> </div>
Checked
<div className="flex items-center mb4"> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=58" isChecked size="xlarge" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=58" isChecked size="large" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=58" isChecked size="medium" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=58" isChecked size="small" /> </div> <div className="mr2"> <UserAvatar imageUrl="https://i.pravatar.cc/140?img=58" isChecked size="xsmall" /> </div> </div>
Props
UserAvatar
imageUrl
HTTPS URL that points a user's avatar. The
imageURL
will take precendence overinitials
if both are supplied.Typestring
initials
The user's initials. This should be passed in as a two character string for best results.
Typestring
fullName
The user's full name. This is used as
title
andalt
text.Typestring
size
The set of avatar sizes that we support.
Type'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number
isChecked
deprecatedDisplays a badge of a checkmark next to the
Avatar
.Note:
Indicate this information outside of the avatar instead.
Typeboolean
isOnline
deprecatedDisplays a badge if the user is online.
Note:
Indicate this information outside of the avatar instead.
Typeboolean
EntityAvatar
imageUrl
HTTPS URL that points a user's avatar. The
imageURL
will take precendence overinitials
if both are supplied.Typestring
initial
The entity's initial. This should be passed in as a one character string.
Typestring
fullName
The entity's full name. This is used as
title
andalt
text.Typestring
size
The set of avatar sizes that we support.
Type'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number
isOnline
deprecatedDisplays a badge if the user is online.
Note:
Indicate this information outside of the avatar instead.
Typeboolean