import Avatar from '@atoms/avatar/Avatar';
import { picsumURL } from '~/mock/imageMockup';
const AvatarAppearance = () => (
<>
<Avatar appearance="circle" src={picsumURL()} />
<Avatar appearance="square" src={picsumURL()} />
</>
);
export default AvatarAppearance;
Avatar
An avatar is a visual representation of a user or entity.
- Examples
- API
Appearance
Sizes
import Avatar from '@atoms/avatar/Avatar';
import { picsumURL } from '~/mock/imageMockup';
const AvatarSize = () => (
<>
<Avatar size="xsmall" src={picsumURL(20)} />
<Avatar size="small" src={picsumURL(24)} />
<Avatar size="medium" src={picsumURL(32)} />
<Avatar size="large" src={picsumURL(40)} />
<Avatar size="xlarge" src={picsumURL(96)} />
<Avatar size="xxlarge" src={picsumURL(128)} />
</>
);
export default AvatarSize;
Status
import Avatar from '@atoms/avatar/Avatar';
import { FaArrowDown } from 'react-icons/fa';
import { picsumURL } from '~/mock/imageMockup';
const AvatarStatus = () => (
<>
<Avatar status="online" src={picsumURL()} />
<Avatar status="offline" src={picsumURL()} />
<Avatar status="busy" src={picsumURL()} />
<FaArrowDown />
</>
);
export default AvatarStatus;
Avatar Group
+4
import Avatar from '@atoms/avatar/Avatar';
import { picsumURL } from '~/mock/imageMockup';
const AvatarGroup = () => (
<>
<Avatar.Group size="large" length={5}>
{Array.from(Array(8)).map((_, i) => (
<Avatar key={i} src={picsumURL()} />
))}
</Avatar.Group>
</>
);
export default AvatarGroup;