Avatar

React avatar component for user identities — initials, photo, or icon fallback, with overflow counts, semantic colors, and roundness options

import { Avatar } from "@plexui/ui/components/Avatar";

Examples

Overview

TW

Text

D

Image

T

Icon

Overflow count

Sizing

Colors & variants

Roundness

roundness

fullxllgmdsmnone

size

48

A

Interactive

WT

Reference

Prop	Type	Default	Description
name	string	—	Display name; used for text initial when no image/icon
imageUrl	string	—	Absolute URL for image avatar
Icon	React.ComponentType	—	Icon component for icon avatar
size	number	—	Width and height in pixels
color	string	—	Semantic color for text/icon avatar
variant	"soft" | "solid"	—	Style variant
overflowCount	number	—	Show overflow count (e.g. +9)
onClick	function	—	Makes avatar interactive

Related components

Avatar GroupReact avatar group component that stacks user avatars into a single overlapping cluster with configurable direction and group sizingBadgeReact badge component for status indicators and inline labels with semantic colors, multiple variants, icon support, and loading stateCardReact card surface primitive for composing login flows, sign-up forms, pricing tiles, payment methods, empty states, and stat showcases