If you're seeing this message, that means JavaScript has been disabled on your browser, please enable JS to make this app work.Simple Design System

Avatar

An avatar is a visual representation of a user or entity.

  • Examples
  • API

Appearance

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;

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;