Avatar

󰉔

PL

Sizes

Status

Contract

Overview

Machine-readable contract from Component Spec.

component: avatarexport: Avatarversion: 1attributes: data-refineui=avatar

Anatomy

Part	data-refineui
root	avatar

Variants

Axis	Values
size	xs, sm, md, lg, xl
layout	image, icon, initials

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from "@refineui/react";

<Avatar>
  <AvatarImage src="/user.jpg" alt="User Name" />
  <AvatarFallback>UN</AvatarFallback>
</Avatar>

<Avatar size="lg" showStatus status="online">
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>U</AvatarFallback>
  <AvatarBadge status="online" />
</Avatar>

<Avatar layout="icon" color="blue">
  <AvatarIcon name="user" />
</Avatar>

<Avatar layout="initials" color="green">
  <AvatarText>AB</AvatarText>
</Avatar>

API Reference

Avatar

Prop	Default	Type	Description
src	—	string | null	Image source URL.
alt	—	string	Image alt text.
layout	—	"image" | "icon" | "initials"	Avatar layout (inferred from children when omitted).
size	"md"	"xs" | "sm" | "md" | "lg" | "xl"	Avatar size tier.
showStatus	false	boolean	Shows presence status badge.
status	—	"online" | "away" | "unavailable" | "offline"	Presence status.
color	—	AvatarColor	Background color (for icon/initials).

AvatarImage

Image element.

AvatarFallback

Fallback content when image fails to load.

AvatarBadge

Prop	Default	Type	Description
status	—	"online" | "away" | "unavailable" | "offline"	Presence status indicator.

AvatarText

Text content for initials.

AvatarIcon

Icon element for icon layout.