Avatar

A component that displays user images or initials in a circular format with various size options.

Import

import Avatar from '@/components/Avatar';

Features

Image display with fallback to initials
Multiple size options (xxs to xxl)
Optional border styling
Interactive with press handlers or links
Background color customization
Dark mode support

Props

Prop	Type	Default	Description
`src`	`string`	—	URI of the image to display
`name`	`string`	—	Name for generating initials when no image is provided
`size`	`'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	`'md'`	Size of the avatar
`border`	`boolean`	`false`	Whether to show a border
`bgColor`	`string`	`'bg-light-secondary dark:bg-dark-secondary'`	Background color (Tailwind class)
`onPress`	`() => void`	—	Function called when pressed
`link`	`string`	—	Navigation link when pressed
`className`	`string`	—	Additional Tailwind classes
`style`	`ViewStyle`	—	React Native style object

Basic Usage

// Basic avatar with image
<Avatar 
  src="https://example.com/profile.jpg" 
  size="md"
/>
 
// Avatar with initials as fallback
<Avatar 
  name="John Doe" 
  size="lg"
/>
 
// Interactive avatar for navigation
<Avatar 
  src="https://example.com/profile.jpg" 
  link="/profile"
  border
/>
 
// Custom styling
<Avatar 
  name="Jane Smith" 
  size="xl" 
  bgColor="bg-purple-500" 
/>

Avatar

Avatar

Import

Features

Props

Basic Usage

On this page