An avatar component with a fallback for initials.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| src | string | - | No |
| name | string | - | No |
| size | smallmediumlarge | medium | Yes |
| className | string | - | No |
| style | CSSProperties | - | No |
Avatar sizes can be set using the size prop.
<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>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" />