Skip to main content

Avatar

An avatar is visual representation of a user or entity.

http://localhost:3000
<Avatar src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />

Usage​

Size​

Sizes are predefined and can be adjusted via the size prop.

http://localhost:3000
<Flex align="center" gap="medium">
  <Avatar size="medium" src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
  <Avatar size="small" src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
</Flex>

Fallback​

Fallback text can be rendered if a src prop is not defined or if the image url does not load.

http://localhost:3000
<Avatar fallback="MD" />

Props​

as?The root element to be rendered