Avatar

Avatars are images used to represent users, teams, orgs, etc.

Default example

Various sizes

<Text is='p'>Various sizes</Text>
<Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={24} mb={4} mr={1} />
<Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={32} mb={4} mr={1} />
<Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={64} mb={4} mr={1} />
<Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={128} mb={4} mr={1} />
<Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={256} mb={4} mr={1} />

Parent + Child avatar combination (AvatarPair)

AvatarAvatar
 <AvatarPair my={4}>
  <Avatar src="https://avatars.githubusercontent.com/bristlecone-design"/>
  <Avatar src="https://avatars.githubusercontent.com/bristlecone-design"/>
 </AvatarPair>

Different border radii

 <Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={64} mb={4} mr={1} radius={4} />
 <Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={64} mb={4} mr={1} radius={6} />
 <Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={64} mb={4} mr={1} radius={8} />
 <Avatar src="https://avatars.githubusercontent.com/bristlecone-design" size={64} mb={4} mr={1} radius={'round'} />

System props

Avatar components get BACKGROUND, COMMON, LAYOUT and POSITION system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
altStringPassed through to alt on img tag
isChildBooleanadds the avatar-child class if present
radiusNumber3 === '6px'adjusts the radius of your avatar
sizeNumber20adds the avatar-small class if less than 24
srcStringThe source url of the avatar image