Skip to content

Avatar

A component to display user avatars.

Fields

NameTypeDescriptionOptions
NameText
Image sourceTextA valid URL. Alternatively, you can provide a state reference to a packed file.
CaptionTextAdd an optional caption under the name, such as the person's job title.
SizeText
  • Small
  • Medium
  • Large
OrientationText
  • Horizontal
  • Vertical
Primary textColor
Secondary textColor
SeparatorColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-clickTriggered when the avatar is clicked.
def handle_avatar_click():
  print("The avatar was clicked")

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Avatar(content={
        "name": "", # str 
        "imageSrc": "", # str 
        "caption": "", # str 
        "size": "medium", # str [small, medium, large]
        "orientation": "horizontal", # str [horizontal, vertical]
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "separatorColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-click": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference