Source

Command Palette

Search for a command to run...

Avatar

Displays user images or initials with multiple size options.

About Avatar

Avatar represents user identity through images with fallback to initials or icons. It supports multiple sizes (default, sm, lg) and integrates with avatar badges for additional status indicators like online state or counts.

Installation

Import the Avatar component from LSD:
import { Avatar } from '@nipsys/lsd'

export default function MyComponent() {
  return <Avatar />
}

API Reference

Radix UI Documentation
Avatar wraps Radix UI primitives
View Radix UI Avatar documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Not keyboard interactive (non-interactive image)
ARIA Attributes
Proper ARIA attributes for screen readers
• Avatar images should have alt text describing the user• Use AvatarFallback with initials for screen readers when no image
Focus States
Visible focus indicators for keyboard users
• Not focusable by design as it's purely presentational• If avatar is interactive (e.g., link), wrap in interactive element
Badge