Avatar
<script setup lang="ts">
import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
</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-grass11 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-grass11 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-grass11 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 radix-vue
Anatomy
Import all parts and piece them together.
<script setup>
import { AvatarImage, AvatarRoot } from 'radix-vue'
</script>
<template>
<AvatarRoot>
<AvatarImage />
<AvatarFallback />
</AvatarRoot>
</template>
API Reference
Root
Contains all the parts of an avatar
Prop | Default | Type |
---|---|---|
as | 'span' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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.
Prop | Default | Type |
---|---|---|
as | 'img' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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. | |
src* | string |
Emit | Payload |
---|---|
loadingStatusChange | [value: ImageLoadingStatus] A callback providing information about the loading status of the image. |
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' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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 | 0 | number Useful for delaying rendering so it only appears for those with slower connections. |
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 'radix-vue'
</script>
<template>
<TooltipRoot>
<TooltipTrigger>
<AvatarRoot>…</AvatarRoot>
</TooltipTrigger>
<TooltipContent side="top">
Tooltip content
<TooltipArrow />
</TooltipContent>
</TooltipRoot>
</template>