Component

Avatar

A circular avatar with image support and fallback initials. Five sizes from xs to xl. Uses the headless @refraction-ui/avatar core.

Sizes

Five sizes from extra-small to extra-large.

XSxs

SMsm

MDmd

LGlg

XLxl

Image & Fallback

Shows image when available, falls back to initials on error.

JDWith Image

JDFallback Initials

ABInitials Only

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { Avatar, AvatarImage, AvatarFallback } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <Avatar size="lg">
      <AvatarImage src="/avatar.jpg" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  )
}

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the avatar.
`shape`	`'circle' \| 'square'`	`'circle'`	Outline: circle, or square with rounded corners (teams, organisations).
`aria-label`	`string`	--	Names the avatar and gives it role="img". Without it the avatar has no role and the inner image alt / fallback text is what assistive tech reads.
`className`	`string`	--	Additional CSS classes.
`children`	`ReactNode`	--	AvatarImage and/or AvatarFallback.