Avatar

An avatar component with a fallback for initials.

CD

API reference

PropTypeDefaultResponsive
src
string
-No
name
string
-No
size
smallmediumlarge
mediumYes
className
string
-No
style
CSSProperties
-No

Examples

Sizes

Avatar sizes can be set using the size prop.

CDCDCD
<Flex gap="4" direction="column">
  <Avatar
    src="https://avatars.githubusercontent.com/u/1540635?v=4"
    name="Charles de Dreuille" size="small"
  />
  <Avatar
    src="https://avatars.githubusercontent.com/u/1540635?v=4"
    name="Charles de Dreuille" size="medium"
  />
  <Avatar
    src="https://avatars.githubusercontent.com/u/1540635?v=4"
    name="Charles de Dreuille" size="large"
  />
</Flex>

Fallback

If the image is not available, the avatar will show the initials of the name.

CD
<Avatar
  src="https://avatars.githubusercontent.com/u/15406AAAAAAAAA"
  name="Charles de Dreuille"
/>