@thumbtack/tp-ui-react-avatar v1.3.4

package: '@thumbtack/tp-ui-react-avatar' kit: component/avatar.yaml platform: react

url: /api/components/component/avatar/react/

Avatar Sizes

Extra Large

<Avatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />

Large

<Avatar imageUrl="https://www.placecage.com/640/480" size="large" />

Medium

<Avatar imageUrl="https://www.placecage.com/640/480" size="medium" />

Small

<Avatar imageUrl="https://www.placecage.com/640/480" size="small" />

Extra Small

<Avatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />

Avatars without images

When a user does not have an image, an Avatar can display the user’s initials instead.

<Avatar initials="JK" />

EntityAvatar

Extra Large

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />

Large

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />

Medium

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />

Small

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />

Initial

<EntityAvatar initial="J" size="medium" />

Avatar Badges

Badges can be added to avatars to denote information including hired status and unread notifications. These badges cannot be used on the xsmall variation.

Checked

<Avatar imageUrl="https://www.placecage.com/640/480" isChecked size="xlarge" />

Notification

<Avatar imageUrl="https://www.placecage.com/640/480" hasUnreadNotifications size="xlarge" />

Online

<Avatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />