Avatar
A graphical representation of the user, often used in profile sections.
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/avatar'
export 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/avatar'
export 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/avatar'
</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/avatar'
export const Events = () => {
const handleStatusChange = (details: Avatar.StatusChangeDetails) => {
console.log(details.status)
}
return (
<Avatar.Root onStatusChange={handleStatusChange}>
<Avatar.Fallback>PA</Avatar.Fallback>
<Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
</Avatar.Root>
)
}
import { Avatar } from '@ark-ui/solid/avatar'
export const Events = () => {
const handleStatusChange = (details: Avatar.StatusChangeDetails) => {
console.log(details.status)
}
return (
<Avatar.Root onStatusChange={handleStatusChange}>
<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/avatar'
</script>
<template>
<Avatar.Root @status-change="(e) => console.log(e.status)">
<Avatar.Fallback>PA</Avatar.Fallback>
<Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
</Avatar.Root>
</template>
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
id | string The unique identifier of the machine. | |
ids | Partial<{ root: string; image: string; fallback: string }> The ids of the elements in the avatar. Useful for composition. |
Emit | Event |
---|---|
statusChange | [details: StatusChangeDetails] Functional called when the image loading status changes. |
Fallback
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | avatar |
[data-part] | fallback |
[data-state] | "hidden" | "visible" |
Image
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | avatar |
[data-part] | image |
[data-state] | "visible" | "hidden" |
RootProvider
Prop | Default | Type |
---|---|---|
value | MachineApi<PropTypes> | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |