Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Avatar

Version 9.1.0GithubStorybook

An Avatar is a graphical representation of a user or entity and an Avatar Group is a collection of Avatars.

Installation

Installation page anchor
yarn add @twilio-paste/avatar - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Avatar, AvatarGroup} from '@twilio-paste/core/avatar';

const AvatarExample = () => {
  return (
    <AvatarGroup size="sizeIcon70" variant="user">
      <Avatar name="Aayush Iyer" />
      <Avatar name="Simon Taggart" />
      <Avatar name="Sarah Li" />
      <Avatar name="Shadi Isber" />
    </AvatarGroup>
  );
};

Props

Props page anchor

Avatar

Avatar page anchor

name RequiredRequired

Used to determine the initials, alt text (if using an image), or title (if using an icon) of the Avatar.

Type
string

color

Override the default color for decorative purposes

Type
ColorVariants
Default
default

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AVATAR

icon

Pass a Paste Icon to display in the Avatar

Type
FC<PropsWithChildren<GenericIconProps>>

size

Type
"sizeIcon05" | "sizeIcon10" | "sizeIcon20" | "sizeIcon30" | "sizeIcon40" | "sizeIcon50" | "sizeIcon60" | "sizeIcon70" | "sizeIcon80" | "sizeIcon90" | "sizeIcon100" | "sizeIcon110" | ("sizeIcon05" | ... 11 more ... | null)[] | { ...; }
Default
sizeIcon70

src

Pass an image path to display in the Avatar

Type
string
Default
null

variant

Type
AvatarVariants
Default
user

AvatarGroup

AvatarGroup page anchor

variant RequiredRequired

Set a variant for every Avatar within the Avatar Group

Type
AvatarVariants
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AVATAR_GROUP

size

Set a size for every Avatar within the Avatar Group

Type
"sizeIcon05" | "sizeIcon10" | "sizeIcon20" | "sizeIcon30" | "sizeIcon40" | "sizeIcon50" | "sizeIcon60" | "sizeIcon70" | "sizeIcon80" | "sizeIcon90" | "sizeIcon100" | "sizeIcon110" | ("sizeIcon05" | ... 11 more ... | null)[] | { ...; }
Default
null

AvatarContent

AvatarContent page anchor

name RequiredRequired

Type
string

icon

Type
FC<PropsWithChildren<GenericIconProps>>

size

Type
"sizeIcon05" | "sizeIcon10" | "sizeIcon20" | "sizeIcon30" | "sizeIcon40" | "sizeIcon50" | "sizeIcon60" | "sizeIcon70" | "sizeIcon80" | "sizeIcon90" | "sizeIcon100" | "sizeIcon110" | ("sizeIcon05" | ... 11 more ... | null)[] | { ...; }

src

Type
string