Avatar

Avatar is used to show a profile picture or a text picture.

Examples

Basic Avatar

Basic avatar can be customized using various props such as size, source, title, intent,... See the below props table for more details.

TT

AA

Avatar.Stack

Avatar.Stack comes in two variants: horizontal and vertical.

Horizontal Avatar.Stack:

TT

SS

AA

OO

NA

Vertical Avatar.Stack:

TT

SS

AA

OO

NA

Custom Avatar.Stack

The number of Avatars being displayed can be controlled using the max prop, and the surplus value can be controlled by the total prop. When both props are set, the number of avatars will prioritize the max prop, and the surplus value will prioritize the total prop.

Limiting the number of Avatars being displayed:

TT

SS

AA

+2

Setting the total number of Avatars:

TT

SS

AA

+197

Avatar.Stack with custom surplus

Avatar surplus can be further customized by using the renderSurplus render function.

450K

useAvatarColors

Avatar support a hook called useAvatarColors to randomize a group of single avatar colors in a stable way.

TT

SS

AA

OO

NA

Fallback to text when image failed to load

TT

Text Avatar with different sizes and intents

Avatar comes with 5 primary intents, success, warning, danger, and info.

Text Avatar with different sizes

MD

MD

MD

MD

MD

MD

MD

MD

Pressable avatar

Avatar Props

	Prop	Required	Default	Type
	intent		primary	"warning" | "success" | "info" | "primary" | "danger"
	onPress			() => void
	size		small	"small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | "xxxxxlarge"
	source			ImageSourcePropType
	style			StyleProp<ViewStyle>
	testID			string
	title			string

Avatar.Stack Props

	Prop	Required	Default	Type
	children	required		ReactElement<Omit<AvatarProps, "style" | "size">, string | JSXElementConstructor<any>>[]
	max			number
	renderSurplus			(value: number) => ReactNode
	size		small	"small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | "xxxxxlarge"
	style			StyleProp<ViewStyle>
	testID			string
	total			number
	variant		horizontal	"horizontal" | "vertical"