Avatar

An avatar component with a fallback for initials.

API reference

Prop	Type	Default	Responsive
src	string	-	No
name	string	-	No
size	smallmediumlarge	medium	Yes
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.

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