1. Drag Avatar element onto your mobile page 2. Set fields:

  • image_url        → profile picture URL from DB
  • initials         → fallback text e.g. JD for John Doe
                       max 2 characters shown
  • size             → width and height in px (default 48)
  • background_color → fallback circle color (hex)
  • text_color       → initials text color (hex)
  • border_color     → border color (hex) - leave empty for no border
  • border_width     → border thickness in px (default 0)
  • shape            → circle / rounded / square

EVENTS:
  • on_tap → fires when user taps the avatar

TIPS:
  • Always set both image_url AND initials
    If image fails → initials show automatically
  • Use on_tap to navigate to user profile page
  • Use border_color white for overlapping avatars in group displays
  • initials are auto-uppercased and limited to 2 chars

Example User profile:
   image_url → Current User's profile_picture
   initials  → Current User's first_name:first char + last_name:first char
   size      → 48
   shape     → circle

Note: Set editor's width and height same as size mntioned in the element's size

WORKS ON:
  ✅ iOS
  ✅ Android

Bubble editor link: https://bubble.io/page?id=mbbuildsnative&test_plugin=1787117567234x799762307932749800_current&tab=Design&name=Native+Initials+avatar&type=page&elements=bTGex