Avatar

An image element with a fallback for representing the user.

<script setup lang="ts">
import { AvatarFallback, AvatarImage, AvatarRoot } from 'akar';
import './styles.css';
</script>

<template>
  <div class="akar-demo akar-demo-Avatar">
    <div :style="{ display: 'flex', gap: '20px' }">
      <AvatarRoot class="AvatarRoot">
        <AvatarImage
          class="AvatarImage"
          src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
          alt="Colm Tuite"
        />
        <AvatarFallback
          class="AvatarFallback"
          :delay-ms="600"
        >
          CT
        </AvatarFallback>
      </AvatarRoot>
      <AvatarRoot class="AvatarRoot">
        <AvatarImage
          class="AvatarImage"
          src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
          alt="Pedro Duarte"
        />
        <AvatarFallback
          class="AvatarFallback"
          :delay-ms="600"
        >
          JD
        </AvatarFallback>
      </AvatarRoot>
      <AvatarRoot class="AvatarRoot">
        <AvatarFallback class="AvatarFallback">
          PD
        </AvatarFallback>
      </AvatarRoot>
    </div>
  </div>
</template>

@import '../_colors/black-alpha.css';
@import '../_colors/grass.css';

@scope (.akar-demo-Avatar) {
  .AvatarRoot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-color: var(--black-a3);
  }

  .AvatarImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  .AvatarFallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--grass-11);
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
  }
}

Features

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

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together.

<script setup>
import { AvatarImage, AvatarRoot } from 'akar';
</script>

<template>
  <AvatarRoot>
    <AvatarImage />
    <AvatarFallback />
  </AvatarRoot>
</template>

Prop	Default	Type
`as`	`"img"`	`AsTag \| 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`

Event	Payload
`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.

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 AvatarImage.

Prop	Default	Type
`as`	`"span"`	`AsTag \| 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.

AvatarFallback.vue source

Examples

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

<script setup>
import { AvatarImage, AvatarRoot, TooltipArrow, TooltipRoot, TooltipTrigger } from 'akar'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger>
      <AvatarRoot>…</AvatarRoot>
    </TooltipTrigger>

    <TooltipContent side="top">
      Tooltip content
      <TooltipArrow />
    </TooltipContent>
  </TooltipRoot>
</template>

Autocomplete

An input with suggestions that allows free-form text entry. Unlike Combobox, the value is the input text itself rather than a selected item.

Calendar

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

Avatar

Features

Installation

Anatomy

API Reference

Root

Image

Fallback

Examples

Clickable Avatar with tooltip