Avatar | Ark UI

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>
)

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

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

<script setup lang="ts">
import { Avatar } from '@ark-ui/vue'
</script>

<template>
  <Avatar.Root>
    <Avatar.Fallback>PA</Avatar.Fallback>
    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar.Root>
</template>

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>
)

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

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>
)

<script setup lang="ts">
import { Avatar } from '@ark-ui/vue'
</script>

<template>
  <Avatar @loading-status-change="(status) => console.log(status)">
    <Avatar.Fallback>PA</Avatar.Fallback>
    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar>
</template>

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`