🦊 fox ui alpha

Avatar

llms.txt

Example

Single Avatar

Avatars Group

Usage

		<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />

<AvatarGroup
	users={[
		{
			src: 'https://github.com/flo-bit.png',
			alt: 'flo-bit',
			fallback: 'FB'
		},
		{
			src: 'https://github.com/rich-harris.png',
			alt: 'rich-harris',
			fallback: 'RH'
		}
	]}
/>

API Reference

Avatar

An image element with a fallback for representing a user.

Property Type Description

src

string

The image source URL. Default: —

alt

string

Alt text for the avatar image. Default: —

fallback

string

Fallback text to display when the image is not available (e.g. initials). Default: —

useThemeColor

boolean

Whether to apply theme color styling to the image. Default: false

imageClass

string

Additional CSS classes to apply to the image element. Default: —

fallbackClass

string

Additional CSS classes to apply to the fallback element. Default: —

imageRef $bindable

HTMLImageElement

Reference to the image DOM element. Default: —

fallbackRef $bindable

HTMLElement

Reference to the fallback DOM element. Default: —

class

string

Additional CSS classes to apply to the root element. Default: —

ref $bindable

HTMLElement

The underlying DOM element. Default: —

Property

src

alt

fallback

useThemeColor

imageClass

fallbackClass

imageRef

fallbackRef

class

ref

AvatarGroup

A group of overlapping avatars displayed in a row.

Property Type Description

users required

array

The list of users to display avatars for.

avatarClass

string

Additional CSS classes to apply to each avatar. Default: —

imageClass

string

Additional CSS classes to apply to each avatar image. Default: —

fallbackClass

string

Additional CSS classes to apply to each avatar fallback. Default: —

class

string

Additional CSS classes to apply to the group container. Default: —

ref $bindable

HTMLDivElement

The underlying DOM element. Default: —

Property

users

avatarClass

imageClass

fallbackClass

class

ref