Skip to main content
Version: 57.2.0

Avatar

Used to represent a single user.

Package: @terreno/ui
Categories: Component
Props interface: AvatarProps
Story source: demo/stories/Avatar.stories.tsx

Live demo

Props

PropTypeRequiredDescription
namestringYesThe name of the user. This is used for the placeholder treatment if an image is not available.
accessibilityLabelstringAccessibility label for the avatar image.
doNotDisturbbooleanIf true, the status will have a "Z" to indicate the user has snoozed notifications.
hasBorderbooleanAdds a white border around Avatar so it's visible when displayed on other images.
onChangereflectionFunction to handle the avatar image edit
sizeunionxs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.
srcstringThe URL of the user's image.
statusAvatarStatusThe status of the user to display with the avatar.
testIDstringRoot test id for the primary interactive element or container.