Avatar

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Avatar displays a user image with automatic fallback to initials or icons. Supports multiple sizes, shapes, and color palettes.

Usage

Basic Usage

JD

Open Editor

import { Avatar } from "@paramanu/data-display-react"

export default function App() {
return <Avatar name="John Doe" />
}

<span class="pm-avatar pm-avatar--circle pm-avatar--md pm-avatar--primary" role="img" aria-label="John Doe">
<span class="pm-avatar__fallback">JD</span>
</span>

Sizes

XS MD XL

Open Editor

import { Avatar } from "@paramanu/data-display-react"

export default function App() {
return (
  <>
    <Avatar size="xs" name="XS" />
    <Avatar size="md" name="MD" />
    <Avatar size="xl" name="XL" />
  </>
)
}

<span class="pm-avatar pm-avatar--circle pm-avatar--xs pm-avatar--primary" role="img"><span class="pm-avatar__fallback">XS</span></span>
<span class="pm-avatar pm-avatar--circle pm-avatar--md pm-avatar--primary" role="img"><span class="pm-avatar__fallback">MD</span></span>
<span class="pm-avatar pm-avatar--circle pm-avatar--xl pm-avatar--primary" role="img"><span class="pm-avatar__fallback">XL</span></span>

Guidelines

Accessibility

• Uses role="img" with aria-label for screen readers.
• Img avatars include meaningful alt text.

Best Practices

• Use circle for user profiles, square for organizations or apps.
• Provide a name prop for automatic initials generation.

API

Props

Prop	Type	Default	Description
size	"xs" | "sm" | "md" | "lg" | "xl" | "2xl"	"md"	Width, height, font size
variant	"circle" | "square"	"circle"	Shape
color	"primary" | "neutral" | "danger" | "success"	"primary"	Fallback background color
src	string	-	Img URL
alt	string	-	Img alt text
name	string	-	Name for initials fallback

CSS Classes

Class	Description
pm-avatar	Base avatar class
pm-avatar--{size}	Size modifier
pm-avatar--{variant}	Shape modifier
pm-avatar__image	Img element
pm-avatar__fallback	Fallback element