[component]
Dev Mode
Avatar
Description
Used to represent a single user.
TS
Name
Has Border
Size
Status
Do Not Disturb
Usage Guidelines
Do
Allow Staff members to upload photos
Use the same component set for both desktop and mobile
Use the colored border to indicate that a message is unread
Don't
Allow patients to upload photos; show the initials version instead
If possible, avoid pairing the status bubbles with the smaller versions: “s” and “xs”
Accessibility
The avatar should have a text equivalent so that screen readers can understand what it is.
Gestalt uses the accessibilityLabel prop for the text description of the image. Without this prop, screen readers will default to the name prop.
Props
Name
Type
Required
Description
name
string
Required
The name of the user. This is used for the placeholder treatment if an image is not available.
accessibilityLabel
string
Accessibility label for the avatar image.
doNotDisturb
boolean
If true, the status will have a "Z" to indicate the user has snoozed notifications.
hasBorder
boolean
Adds a white border around Avatar so it's visible when displayed on other images.
onChange
Function to handle the avatar image edit
size
xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.
src
string
The URL of the user's image.
status
AvatarStatus
The status of the user to display with the avatar.
testID
string
Root test id for the primary interactive element or container.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Profile Picture, Userpic
Examples
Initials
Tony Stark
TS
Tony Stark Jr
TJ
Tony Ironman Stark
TS
Tony
To
Tony Stark Colored
TS
Sizes
XS
TS
SM
TS
MD
TS
LG
TS
XL
TS
Outlines
XS
TS
SM
TS
MD
TS
LG
TS
XL
TS
XS
SM
MD
LG
XL
ImagePicker
Image Picker is only available on XL Avatar
Width: 0
Height: 0
Upload Image