Avatar

An image element with a fallback for representing the user.

CT JD PD

TailwindCSSCSS

<script setup lang="ts">
import { AvatarFallback, AvatarImage, AvatarRoot } from '@oku-ui/primitives'
</script>

<template>
  <div class="flex gap-5">
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarImage
        class="h-full w-full rounded-[inherit] object-cover"
        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        alt="Colm Tuite"
      />
      <AvatarFallback
        class="text-mauve12 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
        :delay-ms="600"
      >
        CT
      </AvatarFallback>
    </AvatarRoot>
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarImage
        class="h-full w-full rounded-[inherit] 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"
      />
      <AvatarFallback
        class="text-mauve12 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
        :delay-ms="600"
      >
        JD
      </AvatarFallback>
    </AvatarRoot>
    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
      <AvatarFallback class="text-mauve12 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
        PD
      </AvatarFallback>
    </AvatarRoot>
  </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.

Installation

Install the component from your command line.

$ npm add @oku-ui/primitives

Anatomy

Import all parts and piece them together.

<script setup>
import { AvatarImage, AvatarRoot } from '@oku-ui/primitives'
</script>

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

API Reference

Root

Contains all the parts of an avatar

Prop	Default	Type
as	'div'	object | AsTag

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.

Prop	Default	Type
as	'div'	object | AsTag
src		string

Emit	Payload
loadingStatusChange	[status: ImageLoadingStatus]

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

Prop	Default	Type
as	'span'	object | AsTag
delayMs		number

Examples

Clickable Avatar with tooltip

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

<script setup>
import { AvatarImage, AvatarRoot, TooltipArrow, TooltipRoot, TooltipTrigger } from '@oku-ui/primitives'
</script>

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

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