Components

Avatar

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>
</>

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>
</>

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>

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