Logo

Avatar

Avatar is a component that displays an image or icon for identifying a user or object.The Avatar component is used to display a user's profile picture or icon.

Import

import { Avatar } from "css-materials";

Usage

Dan Abrahmov
<Avatar name='Dan Abrahmov' src='https://bit.ly/dan-abramov' />

Change Size

Dan Abrahmov
Kent Dodds
Prosper Otemuyiwa
RF
<Avatar name='Dan Abrahmov' src='https://bit.ly/dan-abramov' size='large' />
<Avatar name='Kent Dodds' src='https://bit.ly/kent-c-dodds' size='medium' />
<Avatar name='Prosper Otemuyiwa' src='https://bit.ly/prosper-baba' size='small' />
<Avatar name='Ryan Florence' size={64} />

Change Shape

Dan Abrahmov
Kent Dodds
<Avatar name='Dan Abrahmov' src='https://bit.ly/dan-abramov' shape='circle' />
<Avatar name='Kent Dodds' src='https://bit.ly/kent-c-dodds' shape='square' />

Customize the fallback avatar

ME
?
<Avatar name="Mark Erikson" size="small" bgColor='#FF5733' shape='square' />
<Avatar bgColor='#5733FF' icon={<FiAirplay />} />
<Avatar size="large" bgColor='#FF33A1' />