Avatar
An image element with a fallback for representing the user.
CT JD PD
vue vue
<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.
sh sh
$ npm add @oku-ui/primitives
Anatomy
Import all parts and piece them together.
vue vue
<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.
vue vue
<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>