Components

Avatar(React)

Display user images and badges on Thumbtack.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { UserAvatar, EntityAvatar } from '@thumbtack/thumbprint-react';`

Avatar sizes

UserAvataris 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" size="xlarge" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
        </div>
    </div>
</>

<>
    <div className="flex items-center mb4">
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
        </div>
    </div>
</>

Avatars without images

Avatars without images can display the 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 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>
</>

Badging

A badge can be added to denote the online status of a user. The badge will be placed on the top right portion of the avatar and use the 400-level green color as positive indicator of their 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" isOnline size="xlarge" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
        </div>
    </div>
</div>

<div>
    <div className="flex items-center mb4">
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
        </div>
    </div>
</div>

Props

UserAvatar

imageUrl
HTTPS URL that points a user’s avatar. The imageURL will take precendence over initials if both are supplied.
Type
string
initials
The user’s initials. This should be passed in as a two character string for best results.
Type
string
fullName
The user’s full name. This is used as title and alt text.
Type
string
size
The set of avatar sizes that we support.
Type
This prop can be one of the following 6 types:
'xsmall'
'small'
'medium'
'large'
'xlarge'
number
isChecked
deprecated
Displays a badge of a checkmark next to the Avatar.
Note: Indicate this information outside of the avatar instead.
Type
boolean
isOnline
Displays a badge if the user is online.
Type
boolean

EntityAvatar

imageUrl
HTTPS URL that points a user’s avatar. The imageURL will take precendence over initials if both are supplied.
Type
string
initial
The entity’s initial. This should be passed in as a one character string.
Type
string
fullName
The entity’s full name. This is used as title and alt text.
Type
string
size
The set of avatar sizes that we support.
Type
This prop can be one of the following 6 types:
'xsmall'
'small'
'medium'
'large'
'xlarge'
number
isOnline
Displays a badge if the user is online.
Type
boolean