Avatar

Component for displaying user profile image or placeholder if no image.

Image avatars

Letter avatars

JS
JS
JS
JS

Fallbacks

JS
JS
JS
JS

Different colours

With status

JS
JS
JS
JS
JS
JS
JS
JS

Status Position

JS
JS
JS
JS

Props for Avatar component

NameTypeRequiredDefaultDescription
sizexsmall | small | medium | largeNomediumSize for avatar
namestring | JSX.ElementNo-–°apital letters of name
imageUrlstringNo-Path to the image
statusOriginStatusOriginNo-Position for status indication
isStatusActivebooleanNofalseActive/inactive state for status indication
colorColorPropsNo-Text color
backgroundColorColorPropsNo-Background color

StatusOrigin Prop

NameTypeRequiredDefaultDescription
verticaltop | bottomYes-Vertical align for status indication
horizontalleft | rightYes-Horizontal align for status indication