Input Parameters

Appearance Properties

gender (Text)

• Description: Choose the gender of the avatar
• Options: male, female, nonbinary
• Default: male

faceShape (Text)

• Description: Select the shape of the avatar's face
• Options: oval, round, square, heart
• Default: oval

hairStyle (Text)

• Description: Pick the avatar's hair style
• Options: short, medium, long, curly, wavy, bald
• Default: short

eyeStyle (Text)

• Description: Set the shape of the avatar's eyes
• Options: normal, wide, narrow, round
• Default: normal

eyebrowStyle (Text)

• Description: Choose the style of the avatar's eyebrows
• Options: normal, thick, thin, arched
• Default: normal

beardStyle (Text)

• Description: Pick the avatar's beard or facial hair style
• Options: none, stubble, beard, mustache, goatee
• Default: none

Color Properties

skinTone (Text - Color Code)

• Description: Select the avatar's skin color using a hex color code
• Format: #RRGGBB (e.g., #F4C2A1)
• Default: #F4C2A1

hairColor (Text - Color Code)

• Description: Set the avatar's hair color using a hex color code
• Format: #RRGGBB (e.g., #2F1B14)
• Default: #2F1B14

eyeColor (Text - Color Code)

• Description: Choose the color of the avatar's eyes using a hex color code
• Format: #RRGGBB (e.g., #4A90E2)
• Default: #4A90E2

clothingColor (Text - Color Code)

• Description: Select the color for the avatar's clothing using a hex color code
• Format: #RRGGBB (e.g., #2C3E50)
• Default: #2C3E50

collarColor (Text - Color Code)

• Description: Set the color of the avatar's collar using a hex color code
• Format: #RRGGBB (e.g., #34495e)
• Default: #34495e

Size & Display Properties

size (Integer)

• Description: Define the avatar's size in pixels
• Format: Numeric value (e.g., 100, 120, 200)
• Default: 100
• Range: Flexible pixel dimensions

notifications (Integer)

• Description: Set the number of notifications or alerts to show next to the avatar
• Format: Numeric value (e.g., 5, 7, 1)
• Default: 0 (empty)
• Usage: Displays as a badge indicator on the avatar

Border & Style Properties

borderStyle (Text)

• Description: Choose the border style around the avatar
• Options: none, solid, gradient
• Default: solid

shadow (Boolean)

• Description: Choose whether to display a shadow effect
• Format: true = show shadow, false = hide shadow
• Default: true

hover (Boolean)

• Description: Enable hover effects by setting this to true
• Format: true = enable hover effects, false = disable hover effects
• Default: true
  
  Integration GuideStep 1: Add Component to Application
  1. In OutSystems Service Studio, navigate to your application
  2. Go to Manage Dependencies → Public Elements
  3. Search for "User Avatar" component
  4. Add to your application

• Step 2: Drag Component to Screen

  1. In your screen, drag the User Avatar component from the toolbox
  2. Place it in the desired location