Skip to content
Paste
UX Platform
GitHub

Avatar

The Avatar is a pictorial representation of a user or object. It can display the initials of that entity or an image.

Status
alpha
Version
2.1.1
Sources
Import from
@twilio-paste/core/avatar — or — @twilio-paste/avatar

Using alpha components in your product

Alpha components are ready for you to use in production. Components such as Avatar are likely to not see any API changes. This is only an alpha due to the lack of documentation and a matching Figma component. Feel free to share your experience using this component by starting a discussion on GitHub. We are also looking for a contributor to symbolize this component in Figma. Interested? Reach out!

Guidelines#

About Avatar#

The Avatar is a pictorial representation of a user or object 👩‍🎤. It can display the initials of that entity, an image or a Paste Icon. The Avatar can be sized in the same way as the Paste Icon.

Examples#

Representing an entity via their initials#

Provide the Avatar with a name and the component will render the initials as their visual representation. The option is particularly useful if there is no supplied image.

A note about size 10 and 20

On the 2 smallest sizes some initials will get cut off if the characters are particularly wide, such as W. Although we do support them due to maintaining size parity with Icons, we do not recommend using these 2 sizes.

TM
BT
SD
WS
JB
TM
CA
SL
KP

Representing an entity via an image#

Provide the Avatar with a source path via the src prop to render the Avatar as an image. The src prop acts just like an img tag. You must still provide a name prop.

A note about Avatar contents

The Avatar component can either display an image or an icon, but not both.

avatar example
avatar example
avatar example
avatar example
avatar example
avatar example
avatar example
avatar example
avatar example

Representing an entity via an icon#

Provide the Avatar with an icon prop to display an icon. You must import the icon before passing it to the icon prop. You must still provide a name prop. The icon must be a Paste Iconlink takes you to an external page.

A note about Avatar contents

The Avatar component can either display an image or an icon, but not both.

avatar example
avatar example
avatar example
avatar example
avatar example
avatar example
avatar example
avatar example
avatar example

Responsive sizing#

The Avatar size can be set as a responsive array of sizes.

TM
avatar example
avatar example

Anatomy#

PropertyDefault tokenModifiable?
border-radiusborder-radius-circleNo
background-colorcolor-background-userNo
font-weightfont-weight-boldNo

Size Token Mapping#

SizeFont SizeLine HeightIcon Size
size-icon-10font-size-10line-height-10size-icon-10
size-icon-20font-size-10line-height-20size-icon-10
size-icon-30font-size-10line-height-30size-icon-10
size-icon-40font-size-10line-height-40size-icon-10
size-icon-50font-size-10line-height-50size-icon-20
size-icon-60font-size-10line-height-60size-icon-20
size-icon-70font-size-20line-height-70size-icon-30
size-icon-80font-size-30line-height-80size-icon-40
size-icon-90font-size-40line-height-90size-icon-50
size-icon-100font-size-60line-height-100size-icon-70
size-icon-110font-size-70line-height-110size-icon-80

Usage Guide#

API#

Installation#

yarn add @twilio-paste/avatar - or - yarn add @twilio-paste/core

Usage#

import {Avatar} from '@twilio-paste/avatar';
const AvatarExample = () => {
return <Avatar size="sizeIcon10" name="Aayush Iyer" />;
};

Props#

name string

Provide the name of the user or object.

size IconSize[]

Responsive size property that takes IconSize token names.

src string

Used to set the image src attribute when setting an image as the Avatar.

icon Paste Icon

Specify a Paste Icon to be displayed in the Avatar.


Black lives matter.