Avatar

Displays a user avatar with image, auto-generated initials, or icon fallback. Supports color generation, variants, and click interaction.

Import

import { Avatar, AvatarGroup } from 'reablocks';

Avatar Props

Also accepts all standard HTMLDivElement attributes including onClick.

Basic Usage

<Avatar name="John Doe" size={50} />

With Image

<Avatar name="John Doe" src="/path/to/photo.jpg" size={50} rounded />

Variants

{/* Solid background with white initials */}
<Avatar name="John Doe" size={50} variant="filled" />

{/* Transparent background with colored border */}
<Avatar name="John Doe" size={50} variant="outline" />

Square Avatar

<Avatar name="John Doe" size={50} rounded={false} />

Clickable

When onClick is provided, clickable theme styles are applied:

<Avatar name="John Doe" size={50} onClick={() => console.log('clicked')} />

AvatarTheme Interface

interface AvatarTheme {
  base: string;       // Base styles (flex, alignment, font)
  clickable: string;  // Styles when onClick is present
  rounded: string;    // Rounded corner styles
}

AvatarGroup

Displays multiple avatars in an overlapping stack with an overflow indicator.

AvatarGroup Props

AvatarGroup Usage

<AvatarGroup size={5}>
  <Avatar name="John Doe" src="/photo1.jpg" size={32} />
  <Avatar name="Jane Smith" src="/photo2.jpg" size={32} />
  <Avatar name="Bob Wilson" size={32} />
  <Avatar name="Alice Brown" size={32} />
  <Avatar name="Charlie Davis" size={32} />
  <Avatar name="Diana Evans" size={32} />
  <Avatar name="Frank Green" size={32} />
</AvatarGroup>

When avatars exceed size, a "+N more" indicator is displayed.

AvatarGroupTheme Interface

interface AvatarGroupTheme {
  base: string;      // Container styles (flex, alignment)
  avatar: string;    // Individual avatar wrapper (negative margin for overlap)
  overflow: string;  // Overflow indicator styles
}