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.

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.

Profile picture

Setting the src prop displays the given image as a profile picture.

Letters

Letters can be passed in as children of the Avatar. We recommend using 1 or 2 letters representing the initials of the user.

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.

Component API

NameDescriptionDefault
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Avatar border radius. Defaults to 9999px to force a fully-circular border.
9999
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Avatar size.
md
color
"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.
primary
children
Component
Custom placeholder to be placed inside the avatar, often a 1 to 2 character string.
src
string
Source for image.
email
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.
userID
string
User ID for Airplane account. If set, renders avatar based on Airplane account details.
width
number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; }
Width of the component. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up the entire row, 6 is half, 1 is 1/12. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row. content indicates that the component should take up as much space as its content. auto indicates that the component should take any leftover space on the row. To set width based on the screen size, use an object with a specific width for each breakpoint. e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.
content
offset
number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; }
Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row. To set offset based on the screen size, use an object with a specific offset for each breakpoint. e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.