Avatar

Learn more about Mintlify

Enter your email to receive updates about new features and product releases.

Circular avatar component supporting images, initials, and file upload. Click to view full-size image or to upload new one when editable.

import { Avatar } from '@adoptaunabuelo/react-components';

icon

string

Image URL to display

name

string

User name (displays first letter as fallback when no icon)

editable

boolean

Enable file upload on click (accepts jpg, jpeg, png, gif)

clickable

boolean

Enable click to view full-size image in modal

onChange

(file: string | ArrayBuffer | null) => void

Callback fired when new image is selected, receives base64-encoded file

style

React.CSSProperties

Custom styles for the avatar container

<Avatar
  icon={userImageUrl}
  name="John Doe"
  editable
  onChange={(file) => uploadAvatar(file)}
/>

⌘I

Build docs developers (and LLMs) love