Avatar

Renders an image with square dimensions and masks it with a circle or rounded corners.

Import

// Tree shakable import
import { Avatar } from '@bojagi/pablo';
// Or direct import
import { Avatar } from '@bojagi/pablo/Avatar';

Examples

Different sizes

Avatars can have different sizes, spaning from tiny to large. By default avatars are square.

Live Editor

  <Flex mx={-1}>
    <Avatar
      mx={1}
      size="large"
      src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
      variant="square"
    />
    <Avatar
      size="medium"
      mx={1}
      src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
      variant="square"
    />
    <Avatar
      size="small"
      mx={1}
      src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
      variant="square"
    />
    <Avatar
      size="tiny"
      mx={1}
      src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
      variant="square"
    />
  </Flex>

Result

Loading...

Circle

Live Editor

  <Avatar
    size="large"
    src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
    variant="circle"
  />

Result

Loading...

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description