import {Avatar} from "attio/client"

Example

<Avatar
  name="John Doe"
  src="https://example.com/profile.jpg"
  shape="round"
  variant="bold"
  size="medium"
/>

Props

name
string
required
The name of the person or organization represented by the avatar. This is used for accessibility and may also be used as a fallback display when no image is provided.
src
string | null | undefined
The source URL of the avatar image. If not provided or if the image fails to load, the avatar will typically display initials or a fallback representation based on the name.
shape
'round' | 'box'
The shape of the avatar.Defaults to 'round'.
variant
'subtle' | 'bold'
The visual variant of the avatar, affecting its styling and prominence.Defaults to 'bold'.
size
'small' | 'medium' | 'large'
The size of the avatar.
  • 'small' - 16px
  • 'medium' - 24px
  • 'large' - 32px
Defaults to 'medium'.