Ark UI

Getting Started

Start by importing the necessary components from the package:

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

Here is a basic example:

import { Avatar, AvatarFallback, AvatarImage } 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, AvatarFallback, AvatarImage } from '@ark-ui/vue'
</script>

<template>
  <Avatar>
    <AvatarFallback>PA</AvatarFallback>
    <AvatarImage src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar>
</template>

Handling Events

Avatar also provides onError and onLoad events that can be utilized to handle situations when the image fails to load or has finished loading:

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

const Events = () => (
  <Avatar onError={() => console.log('error')} onLoad={() => console.log('loaded')}>
    <AvatarFallback>PA</AvatarFallback>
    <AvatarImage src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar>
)

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

const Events = () => (
  <Avatar.Root onError={() => console.log('error')} onLoad={() => console.log('loaded')}>
    <Avatar.Fallback>PA</Avatar.Fallback>
    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar.Root>
)

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

<template>
  <Avatar @load="() => console.log('loaded')" @error="() => console.log('error')">
    <AvatarFallback>PA</AvatarFallback>
    <AvatarImage src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar>
</template>

Conclusion

The Avatar component provides an efficient way to display user or entity representation within your applications. Its simple yet flexible structure allows it to easily fit within various use cases and design needs.