Avatar

The Avatar component displays a user's profile image, initials, or a fallback icon.

Basic usage

An Avatar can be used to display a user in your view.
tsx
Copied
1
<Avatar />

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.
tsx
Copied
1
<Avatar email="zhan@airplane.dev" />

Profile picture

Setting the src prop displays the given image as a profile picture.
tsx
Copied
1
<Avatar src="/img/zhan.jpg" />

Letters

Letters can be passed in as children of the Avatar. We recommend using 1 or 2 letters representing the initials of the user.
tsx
Copied
1
<Avatar>XD</Avatar>

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.
tsx
Copied
1
<Avatar size="lg" />
2
<Avatar radius="md" />
3
<Avatar color="green" />

Component API

children
optional
React.ReactNode

Custom placeholder to be placed inside the avatar, often a 1 to 2 character string.

color
optional
Default
primary
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Avatar color. Applies if image source is not set.

email
optional
string

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
number | "xs" | "sm" | "md" | "lg" | "xl"

Avatar border radius. Defaults to 9999px to force a fully-circular border.

size
optional
Default
md
number | "xs" | "sm" | "md" | "lg" | "xl"

Avatar size.

src
optional
string

Source for image.

userID
optional
string

User ID for Airplane account. If set, renders avatar based on Airplane account details.