Avatar

A graphical representation of the user, often used in profile sections.

PA

Anatomy

To set up the avatar correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Avatar component in your project. Let’s take a look at the most basic example:

import { Avatar } from '@ark-ui/react'

const Basic = () => (
  <Avatar.Root>
    <Avatar.Fallback>PA</Avatar.Fallback>
    <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
  </Avatar.Root>
)

Handling Events

Avatar allows you to listen for loading state changes.

import { Avatar } from '@ark-ui/react'

const Events = () => (
  <Avatar.Root onLoadingStatusChange={(details) => console.log(details.status)}>
    <Avatar.Fallback>PA</Avatar.Fallback>
    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar.Root>
)

API Reference

Root

PropTypeDefault
asChild
boolean
dir
'ltr' | 'rtl'"ltr"
getRootNode
() => Node | ShadowRoot | Document
id
string
onLoadingStatusChange
(details: StatusChangeDetails) => void

Image

PropTypeDefault
asChild
boolean

Fallback

PropTypeDefault
asChild
boolean