Avatar

A content area to display user information and profile image. It supports a range of image sizes, fallback icon if no image is provided, text if no image or icon is provided, and includes a label and caption.

Properties

Available properties for Avatar with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameTypeDescriptionfallbackstring

The fallback text to display if there is no image or icon. Only the first two characters are displayed. If multiple words are provided, the first letter of each word is used.

hiddenboolean

Whether the component is visible.

horizontalAlign'left' | 'center' | 'right'

The horizontal alignment of the avatar when there is no label. If there is a label, please use the label alignment options instead.

iconIconKey

The icon to display.

imageSize16 | 24 | 32 | 40 | 48

The size of the image, in pixels.

labelstring

The text to display as a label for the input field.

labelAlign'left' | 'right'

The horizontal alignment of the label.

labelCaptionstring

The additional text to display with the label.

labelPosition'right' | 'left'

The position of the label relative to the input field.

labelWrapboolean

Whether the label can wrap to multiple lines.

maintainSpaceWhenHiddenboolean

Whether the component takes up space on the canvas if hidden is true.

marginstring

The amount of margin to render outside of the component.

showInEditorboolean

Whether the component remains visible in the editor if hidden is true.

srcstring

The source URL.

tooltipTextstring

The text to display in a tooltip on hover or focus.

Methods

Methods for interacting with Avatar. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Related components