Skip to main content

Avatar

Avatars represent users or entities visually with initials, images, or icons.

When to Use​

  • To identify users in lists, tables, comments, or activity feeds
  • To indicate ownership, authorship, or assignment
  • To represent accounts, workspaces, teams, or profiles
  • To show multiple users in collaboration features
  • To display system entities (bots, automated processes)
  • To indicate user status (online/offline) with status dot

When NOT to Use​

  • Don't use avatars for purely decorative purposes
  • Don't rely on avatars as sole identification when names/labels required for accessibility
  • Don't use for branding or logos → use Logo
  • Don't use in small components (buttons, chips, tags, tabs) → use Icon

CRITICAL: Brevo User Rule​

The initial type (charcoal-grey) is RESERVED for the logged-in Brevo user ONLY.

This type is dedicated to the Brevo user's account and profile. It appears in the Account menu from GlobalHeader and any context referring to the logged-in Brevo user.

✅ Correct: Use initial for logged-in Brevo user profile
❌ Incorrect: Using initial for contacts, teams, or other users

Decision Logic​

Is this the logged-in Brevo user?
  YES → type="initial"
  NO → Photo available?
         YES → type="image"
         NO → Initials available?
                YES → type="default" (aqua-teal)
                NO → type="icon"

Size Selection​

  • lg (48px): Profile headers, primary elements
  • md (32px): Default for most contexts, cards, forms
  • sm (24px): Dense layouts (lists, tables, inline mentions)

Accessibility​

  • Always enable tooltip with entity name (recommended for accessibility)
  • For image avatars: provide meaningful imgAltText (e.g., "Profile picture of Jane Doe")
  • Status dot is purely visual — communicate meaning via surrounding context (label or announcement)

Common Mistakes​

  • ❌ Using initial type for non-Brevo users (contacts, teams, companies)
  • ❌ Avatar in buttons, chips, tags, tabs (use Icon component instead)
  • ❌ No tooltip when entity name not visible elsewhere
  • ❌ Image avatar without alt text
  • ❌ Using avatars purely for decoration