Skip to content

Avatar

The Avatar component is used to represent people or entities by displaying images, initials, or icons.

Basic Usage

Avatar styles can be defined through the size, shape, backgroundColor, borderRadius, fallbackText, and icon properties.

Size

Avatars come in 7 preset sizes: xs, sm, md, lg, xl, 2xl, 3xl. The default size is md.

Shape

There are two types of Avatars: circle, and square. The default type is circle.

Background Color

The backgroundColor property allows you to set the background color of the avatar.

Border Radius

The borderRadius property allows you to set the border radius of the avatar.

Fallback Text

The fallbackText property allows you to display a fallback text if the image fails to load.

Icon

The icon property allows you to display an icon instead of an image.

Outlined

The outlined property allows you to display an outlined avatar.

Customization

Besides preset sizes, you can pass in numbers to customize Avatar sizes. The default range is 1-20, which can be modified by setting the range field in the component preset.

JavaScript
    onionlUIPreset({ range: 25 }),

Properties

PropertyDescriptionTypeAccepted ValuesDefault
srcImage URLstring--
altAlternative text for imagestring--
initialsInitials to show when no imagestring--
iconIcon name to displaystring--
fallbackContentFallback contentstring--
sizeAvatar sizestring'xs' / 'sm' / 'md' / 'lg' / 'xl' / '2xl' / '3xl' / number'md'
shapeAvatar shapestring'circle' / 'square''circle'
backgroundColorBackground colorstring-'#101'
borderRadiusCustom border radiusstring / number--
outlinedWhether avatar is outlinedbooleantrue / falsefalse
outlineColorOutline colorstring-'#ccc'
outlineWidthOutline widthnumber-3
outlineStyleOutline stylestring'solid' / 'gradient''solid'
outlineGradientOutline gradientstring-'linear-gradient(45deg, #3b82f6, #8b5cf6)'
clickableWhether avatar is interactivebooleantrue / falsefalse
ariaLabelARIA label for accessibilitystring--

Events

NameDescriptionParameters
clickTriggered when clicked (only if clickable is true)(event: MouseEvent)
errorTriggered when image fails to load-