import {Avatar} from "attio/client"

Props

name : string

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".

Example

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