Avatar

Source

Theme Source

The Avatar component is a versatile and customizable element that can be used to represent a user. It can display a profile picture, initials, or a fallback icon, depending on the available data and network conditions.

Import#

Pearl UI provides two avatar-related components for different use cases:

Avatar: This component is used to represent a single user.
AvatarGroup: This component is a wrapper that stacks multiple Avatar components together. It also provides the ability to limit the number of avatars displayed.

import { Avatar, AvatarGroup } from "pearl-ui";

Usage#

The Avatar component can display a local user image or a user image from a remote source.

// Displaying a local user image<Avatar src={require("<path-to-local-user-image>.jpeg")} />
// Displaying a user image from a remote source<Avatar src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg" />

Avatar Sizes#

The size prop can be used to adjust the size of the avatar. The available sizes are "xs", "s", "m", and "l" in the default component configuration.

<Avatar  src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"  size="xs"/>
<Avatar  src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"  size="s"/>
<Avatar  src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"  size="m"/>
<Avatar  src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"  size="l"/>

Avatar Fallback#

In cases where the desired image is unavailable or inaccessible, the Avatar component can display a fallback. This could be the user's initials, a default image, or a custom component.

// Displays an fallback avatar with the initials of the user<Avatar name="Rohit Agrawal" />;
// Displays an image saying 'No Image Available' in case the source image doesn't exist<Avatar  src="https://4kwallpapers.com/imas/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-wwdc-stock-2560x1440-1455.jpg"  fallbackSource={{    uri: "https://cdn.segmentnext.com/wp-content/themes/segmentnext/images/no-image-available.jpg",  }}/>;
// Displays a custom component with an error icon in case the source image doesn't existimport { Icon } from "pearl-ui";
<Avatar  backgroundColor="neutral.200"  fallbackComponent={    <Icon      iconFamily="FontAwesome"      iconName="user-circle"      color="neutral.600"      rawSize={55}    />  }/>;

If both the fallbackComponent and fallbackSource props are specified, the fallbackComponent prop will take precedence.

Avatar Group#

The AvatarGroup component can be used to display a group of avatars. It allows you to limit the number of avatars displayed and adjust the spacing between them.

<AvatarGroup spacing="10" max={2} truncatedBackgroundColor="neutral.200">  <Avatar    name="Rohit Agrawal"    src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"  />  <Avatar    name="Rohit Agrawal"    src="https://avatars.githubusercontent.com/u/29514438?s=400&u=d194d5de8df93f55038130ccc66429f94f8f900f&v=4"  />  <Avatar    name="Rohit Agrawal"    src="https://instagram.fdel1-3.fna.fbcdn.net/v/t51.2885-19/s320x320/160616189_1075891466264003_198594308312142696_n.jpg?_nc_ht=instagram.fdel1-3.fna.fbcdn.net&_nc_cat=111&_nc_ohc=-URhWepekUsAX_wt_-J&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-caDqy7XqUUTkGv5_QytlFTxtdZ2wVhZDgB4vU3Jl2qQ&oe=61DF5972&_nc_sid=7bff83"  /></AvatarGroup>

Avatar Badges#

Badges can be added to the avatar to show online/offline status, add action buttons, etc.

const OnlineAvatar = withBadge(undefined, {  placement: "bottomRight",  backgroundColor: "success.500",  size: "s",  minW: 15,  h: 15,  offset: 0,})(Avatar);
const OfflineAvatar = withBadge(undefined, {  placement: "bottomRight",  backgroundColor: "danger.500",  size: "s",  minW: 15,  h: 15,  offset: 0,})(Avatar);
const AvatarWithEditButton = withBadge(  <Icon iconFamily="Ionicons" iconName="pencil" size="s" color="white" />,  {    placement: "bottomRight",    size: "m",    onPress: () => {      console.log("PRESSED!");    },  })(Avatar);

Customizing Initials#

The getInitials prop allows you to control how the user's initials are computed.

const firstNameTwoLetters = (name: string) => `${name[0]}${name[1]}`.toUpperCase()
<Avatar name="Rohit Agrawal" getInitials={firstNameTwoLetters} />;

Overriding Styles#

The Avatar component supports a variety of style props which can be used to override the pre-defined component style in the theme.

<Avatar mt="6" borderRadius="m" />

Example#

Embed not loading? Click here

Accessibility#

The Avatar component has the role of image.

Avatar Component Properties#

Supported Style Properties#

The Avatar component is built upon the Image component, hence all Image properties can be utilized.

Additional Properties#

Name	Required	Type	Default	Description
`size`	No	PearlTheme.components.Avatar["sizes"]	`"m"`	Defines the size of the avatar.
`variant`	No	PearlTheme.components.Avatar["variants"]		Specifies the variant of the avatar.
`src`	No	string \| number		The source of the Avatar image. Can be a URL or a local image.
`name`	No	string		The name of the person in the avatar. If 'src' is not loaded or is missing, the 'name' will be used to create the initials.
`getInitials`	No	(name: string): string	Takes the first letters of the name	A method to specify how initials are generated from a user's name.

AvatarGroup Component Properties#

Supported Style Properties#

The AvatarGroup component is built upon the Box component, hence all Box properties can be utilized.

Additional Properties#

Name	Required	Type	Default	Description
`size`	No	PearlTheme.components.Avatar["sizes"]	`"m"`	Defines the size of all the avatars in the group.
`variant`	No	PearlTheme.components.Avatar["variants"]		Specifies the variant of all the avatars in the group.
`spacing`	No	PearlTheme["spacing"]	`2`	The spacing between the avatars.
`truncatedBackgroundColor`	No	PearlTheme["palette"]		The background color of the circle which shows the "+X" label of remaining avatars.
`max`	No	number	Takes the first letters of the name	Maximum number of avatars to show. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).