Avatar

An image element with a fallback for representing the user, using the Radix implementation.

Basic usage

import { Avatar } from '@streamelements/frontend-ui';

export function MyAvatar({ src }: Props) {
  return <Avatar src={src}>
}

Sizes

xxl

xl

lg

md

sm

xs

xxs

With fallback values

xxlxllgmdsmxsxxs

Props

Property	Value	Default	Description
size	'xss' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	'md'	Sets the size of the element
src	string		Image url
srcSet	string	undefined	img srcset attribute value
onClick	Function	undefined	Callback function Signature fn(event) event: The event source of the callback.
fallback	ReactNode	undefined	Fallback to display inside the avatar circle while the image is loading, or if it didn't load.