Avatar

Avatars are UI elements that stand as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.

Props

Avatar properties

Property	Description	Type	Default
bg	Fallback color incase image fails to load	`string`	-
color	Sets the color of the initials	`string`	-
fit	Object-fit property of the image	`fill` `contain` `cover` `none` `scale-down`	`cover`
icon	Custom icon type	`ReactNode`	`null`
imageSrc	Link to image source	`string`	-
imageAlt	Description of the image	`string`	-
initialsSize	Set font size of initials	`number`	16
shape	Shape of the avatar	`circle` `square`	`circle`
size	How large should the avatar be?	`large` `medium` `small` `tiny` `number`	`small`
stories	Make avatar look like stories	`boolean`	`false`
username	Username for setting avatar initials	`string`	-

Usage

Unless where using an icon always provide the imageSrc and imageAlt props

Base

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="large"
      shape="circle"
    />
  </BrowserWindow>
);

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="large"
      shape="circle"
    />
  </BrowserWindow>
);

Types

import { Avatar, BrowserWindow, Flex } from 'camara';
import { User } from 'react-feather';

render(
  <BrowserWindow docs>
    <Flex>
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="large"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="medium"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="small"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="tiny"
      />
    </Flex>
    <Flex>
      <Avatar size="large" icon={<User color="#777" size={64} />} />
      <Avatar size="medium" icon={<User color="#777" size={48} />} />
      <Avatar size="small" icon={<User color="#777" size={32} />} />
      <Avatar size="tiny" icon={<User color="#777" size={24} />} />
    </Flex>
    <Flex>
      <Avatar size="large" username="SM" />
      <Avatar size="medium" username="SM" />
      <Avatar size="small" username="SM" />
      <Avatar size="tiny" username="SM" />
    </Flex>
    <Flex>
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="large"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="medium"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="small"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="tiny"
      />
    </Flex>
  </BrowserWindow>
);

import { Avatar, BrowserWindow, Flex } from 'camara';
import { User } from 'react-feather';

render(
  <BrowserWindow docs>
    <Flex>
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="large"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="medium"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="small"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        size="tiny"
      />
    </Flex>
    <Flex>
      <Avatar size="large" icon={<User color="#777" size={64} />} />
      <Avatar size="medium" icon={<User color="#777" size={48} />} />
      <Avatar size="small" icon={<User color="#777" size={32} />} />
      <Avatar size="tiny" icon={<User color="#777" size={24} />} />
    </Flex>
    <Flex>
      <Avatar size="large" username="SM" />
      <Avatar size="medium" username="SM" />
      <Avatar size="small" username="SM" />
      <Avatar size="tiny" username="SM" />
    </Flex>
    <Flex>
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="large"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="medium"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="small"
      />
      <Avatar
        imageSrc="https://source.unsplash.com/200x200/?shiba-inu"
        imageAlt="portrait of Shiba Inu"
        stories
        size="tiny"
      />
    </Flex>
  </BrowserWindow>
);

Sizes

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="large"
    />
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="medium"
    />
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="small"
    />
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="tiny"
    />
  </BrowserWindow>
);

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="large"
    />
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="medium"
    />
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="small"
    />
    <Avatar
      imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
      imageAlt="short-coated white and tan dog photo"
      size="tiny"
    />
  </BrowserWindow>
);

Shapes

import { Avatar, Box, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Box>
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="large"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="medium"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="small"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="tiny"
        />
      </Box>
      <Box>
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="large"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="medium"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="small"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="tiny"
        />
      </Box>
    </Flex>
  </BrowserWindow>
);

import { Avatar, Box, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Box>
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="large"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="medium"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="small"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="circle"
          size="tiny"
        />
      </Box>
      <Box>
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="large"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="medium"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="small"
        />
        <Avatar
          imageSrc="https://source.unsplash.com/Qi1BfZO8h2s/400x400"
          imageAlt="short-coated white and tan dog photo"
          shape="square"
          size="tiny"
        />
      </Box>
    </Flex>
  </BrowserWindow>
);

Icon

import { Avatar, BrowserWindow } from 'camara';
import { User } from 'react-feather';

render(
  <BrowserWindow docs>
    <Avatar size="large" icon={<User color="#777" size={64} />} />
    <Avatar size="medium" icon={<User color="#777" size={48} />} />
    <Avatar size="small" icon={<User color="#777" size={32} />} />
    <Avatar size="tiny" icon={<User color="#777" size={24} />} />
  </BrowserWindow>
);

import { Avatar, BrowserWindow } from 'camara';
import { User } from 'react-feather';

render(
  <BrowserWindow docs>
    <Avatar size="large" icon={<User color="#777" size={64} />} />
    <Avatar size="medium" icon={<User color="#777" size={48} />} />
    <Avatar size="small" icon={<User color="#777" size={32} />} />
    <Avatar size="tiny" icon={<User color="#777" size={24} />} />
  </BrowserWindow>
);

Initial

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar size="large" username="SM" />
    <Avatar size="medium" username="SM" />
    <Avatar size="small" username="SM" />
    <Avatar size="tiny" username="SM" />
    <Avatar initialsSize={20} username="SM" />
  </BrowserWindow>
);

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar size="large" username="SM" />
    <Avatar size="medium" username="SM" />
    <Avatar size="small" username="SM" />
    <Avatar size="tiny" username="SM" />
    <Avatar initialsSize={20} username="SM" />
  </BrowserWindow>
);

Stories

Instragram stories style Avatars

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar
      stories
      size="large"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
    <Avatar
      stories
      size="medium"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
    <Avatar
      stories
      size="small"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
    <Avatar
      stories
      size="tiny"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
  </BrowserWindow>
);

import { Avatar, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Avatar
      stories
      size="large"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
    <Avatar
      stories
      size="medium"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
    <Avatar
      stories
      size="small"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
    <Avatar
      stories
      size="tiny"
      imageSrc="https://source.unsplash.com/8TQUF6UbpAk/400x400"
      imageAlt="woman in black and white crew neck long sleeve shirt wearing purple knit cap"
    />
  </BrowserWindow>
);