Avatar

Avatars can take an image or a short string in order to display a tidy, circular element that can be used in your UI. Avatars are commonly seen in user profiles.

Import Syntax

xxxxxxxxxx
 
import Avatar from 'calcite-react/Avatar';

Basic Usage

 
<Avatar style={{ margin: '10px' }}>A</Avatar>
<Avatar
  style={{
    margin: '10px',
    backgroundColor: colors['v-rr-140'],
  }}
>
  CL
</Avatar>
<Avatar
  style={{
    margin: '10px',
    backgroundColor: colors['v-bb-140'],
    color: '#4c4c4c',
  }}
>
  JP
</Avatar>

With Image

 
<Avatar src={CodyProfilePic} style={{ margin: '10px' }} />
<Avatar
  src="https://avatars2.githubusercontent.com/u/3399064?s=400&v=4"
  style={{ margin: '10px', width: 60, height: 60 }}
/>

With Icon

 
<Avatar style={{ margin: '10px' }}>
  <DownloadToIcon />
</Avatar>
<Avatar
  style={{
    margin: '10px',
    backgroundColor: colors['v-gg-160'],
  }}
>
  <SaveIcon size={16} />
</Avatar>
<Avatar
  style={{
    margin: '10px',
    backgroundColor: colors['v-rr-120'],
    color: colors['v-rr-160'],
  }}
>
  <UserIcon />
</Avatar>
<Avatar
  style={{
    margin: '10px',
    backgroundColor: colors['v-vv-160'],
  }}
>
  <SearchIcon style={{ fill: colors['v-vv-120'] }} />
</Avatar>

Props

Property	Type	Required	Default	Description
size	Number	false	40	Diameter of the Avatar.
children	Node	false	-	The content of the component; can take text, an image, or an icon.
src	String	false	-	The src attribute for the img element.
alt	String	false	-	Used in combination with src to provide an alt attribute for the rendered img element.

Calcite React

Avatar

Import Syntax

Basic Usage

With Image

With Icon

Props