Skip to main content

Avatar

The Avatar component displays a user or entity representation using an image, icon, or initials.

Installation

yarn add @twilio-paste/avatar

Usage

Image Avatar

import { Avatar } from '@twilio-paste/avatar';

<Avatar name="John Doe" src="/path/to/image.jpg" />

Initials Avatar

<Avatar name="John Doe" />

Icon Avatar

import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';

<Avatar name="User" icon={UserIcon} />

Avatar Group

import { AvatarGroup, Avatar } from '@twilio-paste/avatar';

<AvatarGroup size="sizeIcon70" variant="user">
  <Avatar name="John Doe" />
  <Avatar name="Jane Smith" />
  <Avatar name="Bob Johnson" />
</AvatarGroup>

Props

Avatar

name
string
required
Used to determine the initials, alt text (if using an image), or title (if using an icon) of the Avatar.
size
IconSize
default:"sizeIcon70"
Sets the size of the avatar.
icon
React.FC<GenericIconProps>
Pass a Paste Icon to display in the Avatar.
src
string
Pass an image path to display in the Avatar.
color
'default' | 'decorative10' | 'decorative20' | 'decorative30' | 'decorative40'
default:"default"
Override the default color for decorative purposes.
variant
'user' | 'entity'
default:"user"
Sets the shape of the avatar. ‘user’ is circular, ‘entity’ is rounded square.
element
string
default:"AVATAR"
Overrides the default element name to apply unique styles with the Customization Provider.

AvatarGroup

size
IconSize
required
Set a size for every Avatar within the Avatar Group.
variant
'user' | 'entity'
required
Set a variant for every Avatar within the Avatar Group.
element
string
default:"AVATAR_GROUP"
Overrides the default element name to apply unique styles with the Customization Provider.

Features

  • Automatically generates initials from the name prop
  • Supports multiple color variants for decorative purposes
  • Two shape variants: circular for users, rounded square for entities
  • Grouping support with automatic spacing

Build docs developers (and LLMs) love