Avatar

An image element with a fallback for representing the user.

<script setup lang="ts">
import { AAvatarFallback, AAvatarImage, AAvatarRoot } from 'akar';
</script>

<template>
  <div class="flex gap-5">
    <AAvatarRoot class="align-middle rounded-full bg-background-accented inline-flex shrink-0 size-11 select-none items-center justify-center overflow-hidden">
      <AAvatarImage
        class="rounded-inherit size-full object-cover"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        alt="Colm Tuite"
      />
      <AAvatarFallback
        class="text-grass11 text-sm leading-1 font-medium bg-white flex h-full w-full items-center justify-center dark:text-stone-300 dark:bg-stone-800"
        :delay-ms="600"
      >
        CT
      </AAvatarFallback>
    </AAvatarRoot>
    <AAvatarRoot class="align-middle rounded-full bg-background-accented inline-flex shrink-0 size-11 select-none items-center justify-center overflow-hidden">
      <AAvatarImage
        class="rounded-inherit size-full object-cover"
        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
        alt="Pedro Duarte"
      />
      <AAvatarFallback
        class="text-grass11 text-sm leading-1 font-medium bg-white flex h-full w-full items-center justify-center dark:text-stone-300 dark:bg-stone-800"
        :delay-ms="600"
      >
        JD
      </AAvatarFallback>
    </AAvatarRoot>
    <AAvatarRoot class="align-middle rounded-full bg-background-accented inline-flex shrink-0 size-11 select-none items-center justify-center overflow-hidden">
      <AAvatarFallback class="color-text-muted leading-none font-medium truncate">
        PD
      </AAvatarFallback>
    </AAvatarRoot>
  </div>
</template>

Features

Automatic and manual control over when the image renders.
Fallback part accepts any children.
Optionally delay fallback rendering to avoid content flashing.

Anatomy

Import all parts and piece them together.

<script setup>
import { AAvatarFallback, AAvatarImage, AAvatarRoot } from 'akar';
</script>

<template>
  <AAvatarRoot>
    <AAvatarImage />
    <AAvatarFallback />
  </AAvatarRoot>
</template>

One benefit of using Akar is its flexibility and low-level control over the components. However, this also means that you may need to manually construct more complex UI elements by combining multiple Akar components together.

If you feel there's a lot of elements that needs to be constructed manually using Akar, consider using Pohon UI instead. It provides a higher-level abstraction over Akar components with pre-defined styles and behaviors that can help you build UIs faster.

API Reference

Root

Contains all the parts of an avatar

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Image

The image to render. By default it will only render when it has loaded. You can use the @loadingStatusChange handler if you need more control.

Props

Prop	Default	Type
`as`	`'img'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`crossOrigin`		`'' \| 'anonymous' \| 'use-credentials'`
`referrerPolicy`		`'' \| 'no-referrer' \| 'no-referrer-when-downgrade' \| 'origin' \| 'origin-when-cross-origin' \| 'same-origin' \| 'strict-origin' \| 'strict-origin-when-cross-origin' \| 'unsafe-url'`
`src*`		`string`

Emits

Event	Type
`loadingStatusChange`	`[value: ImageLoadingStatus]` A callback providing information about the loading status of the image. This is useful in case you want to control more precisely what to render as the image is loading.

Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections. For more control, use the @loadingStatusChange emit on AAvatarImage.

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`delayMs`		`number` Useful for delaying rendering so it only appears for those with slower connections.

Examples

You can compose the Avatar with a Tooltip to display extra information.

<script setup>
import { AAvatarRoot, ATooltipArrow, ATooltipRoot, ATooltipTrigger } from 'akar';
</script>

<template>
  <ATooltipRoot>
    <ATooltipTrigger>
      <AAvatarRoot>…</AAvatarRoot>
    </ATooltipTrigger>

    <ATooltipContent side="top">
      ATooltip content
      <ATooltipArrow />
    </ATooltipContent>
  </ATooltipRoot>
</template>

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Calendar

Displays dates and days of the week, facilitating date-related interactions.