Avatar
The
Avatar
component displays a user's profile image, initials, or a fallback icon.Basic usage
Basic usage
An
Avatar
can be used to display a user in your view.tsxCopied1<Avatar />
Airplane user email
Airplane user email
If the user has an Airplane account, passing in the
email
prop automatically pulls the profile
picture or, if no profile picture is set, the user's initials from the Airplane account.tsxCopied1<Avatar email="zhan@airplane.dev" />
Profile picture
Profile picture
Setting the
src
prop displays the given image as a profile picture.tsxCopied1<Avatar src="/img/zhan.jpg" />
Letters
Letters
Letters can be passed in as children of the
Avatar
. We recommend using 1 or 2 letters representing
the initials of the user.tsxCopied1<Avatar>XD</Avatar>
Size, radius, color
Size, radius, color
The size, radius, and color of the
Avatar
can be modified with the corresponding props. Note that
color does not apply when using profile pictures.tsxCopied1<Avatar size="lg" />2<Avatar radius="md" />3<Avatar color="green" />
Component API
Component API
children
optional
Custom placeholder to be placed inside the avatar, often a 1 to 2 character string.
color
optional
Default
primary
Avatar color. Applies if image source is not set.
email
optional
User email for Airplane account. If set, renders avatar based on Airplane account details. If both email and userID are set, email takes precedence.
radius
optional
Default
9999
Avatar border radius. Defaults to 9999px to force a fully-circular border.
size
optional
Default
md
Avatar size.
src
optional
Source for image.
userID
optional
User ID for Airplane account. If set, renders avatar based on Airplane account details.