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.0
- 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.
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.
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 Icon.
Responsive sizing#
The Avatar size can be set as a responsive array of sizes.
Anatomy#
| Property | Default token | Modifiable? |
|---|---|---|
| border-radius | border-radius-circle | No |
| background-color | color-background-user | No |
| font-weight | font-weight-bold | No |
Size Token Mapping#
| Size | Font Size | Line Height | Icon Size |
|---|---|---|---|
| size-icon-10 | font-size-10 | line-height-10 | size-icon-10 |
| size-icon-20 | font-size-10 | line-height-20 | size-icon-10 |
| size-icon-30 | font-size-10 | line-height-30 | size-icon-10 |
| size-icon-40 | font-size-10 | line-height-40 | size-icon-10 |
| size-icon-50 | font-size-10 | line-height-50 | size-icon-20 |
| size-icon-60 | font-size-10 | line-height-60 | size-icon-20 |
| size-icon-70 | font-size-20 | line-height-70 | size-icon-30 |
| size-icon-80 | font-size-30 | line-height-80 | size-icon-40 |
| size-icon-90 | font-size-40 | line-height-90 | size-icon-50 |
| size-icon-100 | font-size-60 | line-height-100 | size-icon-70 |
| size-icon-110 | font-size-70 | line-height-110 | size-icon-80 |
Usage Guide#
API#
Installation#
yarn add @twilio-paste/avatar - or - yarn add @twilio-paste/coreUsage#
import {Avatar} from '@twilio-paste/avatar';const AvatarExample = () => { return <Avatar size="sizeIcon10" name="Aayush Iyer" />;};Note: The Avatar component will display the icon if both the icon and src props are passed.
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.