Documentation
Avatar

Avatar

Example

import { Avatar } from '@i4o/catalystui'
 
export default () => {
	return (
		<>
			<Avatar
                size='small'
				src='https://images.unsplash.com/photo-1670525975578-4051a7803c38?&w=128&h=128&dpr=2&q=80'
				variant='circle'
			/>
			<Avatar
                size='base'
				src='https://images.unsplash.com/photo-1670525975578-4051a7803c38?&w=128&h=128&dpr=2&q=80'
				variant='circle'
			/>
			<Avatar
                size='large'
				src='https://images.unsplash.com/photo-1669585997967-06d776524f7a?&w=128&h=128&dpr=2&q=80'
				variant='rounded'
			/>
			<Avatar fallback='J' variant='circle' />
			<Avatar fallback='S' variant='rounded' />
		</>
	)
}

Props

NameTypeDefaultDescription
fallbackstring | ReactNode''Fallback text to display if no image is provided or if image fails to load.
srcstring''Image source.
variant'circle' | 'rounded''circle'Avatar variant.