Avatars

Avatars are used to represent users or entities, either with an image or their initials.

Props

PropTypeDefaultDescription
srcstring-The source URL of the image.
altstring''Alternative text for the image, also used to generate fallback initials.
size'sm' | 'md' | 'lg''md'The size of the avatar.
shape'circle' | 'rounded''circle'The shape of the avatar.

Examples

Basic Usage

The component displays an image when a `src` is provided.

John Doe
<Avatar src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" />

Fallback to Initials

If no `src` is provided, the component falls back to displaying initials derived from the `alt` text.

JD
<Avatar alt="Jane Doe" />

Sizes

Avatars are available in multiple sizes to fit different contexts.

John DoeJohn DoeJohn Doe
<Fragment>
  <Avatar src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" size="sm" />
  <Avatar src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" size="md" />
  <Avatar src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" size="lg" />
</Fragment>

Shapes

Switch between a circular or rounded square shape.

John DoeJohn Doe
<Fragment>
  <Avatar src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" shape="circle" />
  <Avatar src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="John Doe" shape="rounded" />
</Fragment>