Avatar

Display user identities with either text, photo, or an icon

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

Examples

Overview

W

Text

D

Image

Icon

Overflow count

+9

Sizing

Colors & variants

primary

secondary

success

danger

info

discovery

soft

A

B

C

D

E

F

solid

A

B

C

D

E

F

Roundness

A

roundness

fullxllgmdsmnone

Interactive

W

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