uicomponents.dev
Media
⚛️react
Official
Simple

Avatar

An avatar component for displaying user profile images or initials. Supports multiple sizes and fallback states.

#media#avatar#profile#image
71.0k downloads1.3k starsWCAG AAv1.6.0Updated 3/12/2024
Improve

Preview

Installation

npm install @uicomponents/avatar

Usage

Props

PropTypeDefaultDescription

Accessibility

WCAG Level

AA

Keyboard Support

Yes

Screen Reader

Yes

Keyboard Navigation

  • Tab to focus
  • Enter/Space to activate

Screen Reader Notes

The Avatar component announces its role and state to screen readers.

Focus Management

Focus is managed according to WAI-ARIA guidelines.

Customization

CSS Variables

VariableDefaultDescription

Changelog

v1.6.0

March 12, 2024
  • Feature
    Latest release

Community

Contributors

0 discussions
0 open issues
0 pull requests
Report IssueImprove Component

Ready to use Avatar?

Copy the code above or explore more components in our library.

Explore More