Radix Vue

Appearance

Avatar ​

An image element with a fallback for representing the user.
PD

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.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<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

PropTypeDefault
as
string | Component
span
asChild
boolean
false

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.

PropTypeDefault
as
string | Component
img
asChild
boolean
false
EmitType
@loadingStatusChange
(status: "idle" | "loading" | "loaded" | "error") => void

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.

PropTypeDefault
as
string | Component
span
asChild
boolean
false
delayMs
number

Examples ​

Clickable Avatar with tooltip ​

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

vue
<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>