Avatar

Profile picture with automatic initials fallback.

Examples

Sizes

<Avatar name="Kactos" size="sm" />
<Avatar name="Kactos" size="sm" />
<Avatar name="Kactos" />
<Avatar name="Kactos" size="lg" />
<Avatar name="Kactos" size="xl" />

With image

Pass src for the picture. When the image is missing or fails to load, the component falls back to initials.

<Avatar
  name="Linus Torvalds"
  src="https://avatars.githubusercontent.com/u/1024025?v=4"
/>
<Avatar
  name="Dan Abramov"
  src="https://avatars.githubusercontent.com/u/810438?v=4"
  size="lg"
/>

Initials fallback

Without src, initials are computed from the name. Same when src fails to load.

<Avatar name="Kactos Tecnologia" />
<Avatar name="Nivaldo Neto" />
<Avatar name="benix-ds" />

API Reference

Props of the Avatar component.

Prop	Type	Default	Description
`name*`	`string`	—	Used to compute fallback initials.
`src`	`string`	—	Image URL. Falls back to initials if undefined or fails to load.
`size`	`'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	—
`className`	`string`	—	—