Avatar

An image element with a fallback for representing the user.

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import React from 'react';

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage
        source={{ uri: 'https://avatars.githubusercontent.com/u/99088394?v=4' }}
      />
      <AvatarFallback>AB</AvatarFallback>
    </Avatar>
  );
}

Installation


pnpm dlx bna-ui add avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

<Avatar>
  <AvatarImage
    source={{ uri: 'https://avatars.githubusercontent.com/u/99088394?v=4' }}
  />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Examples

Default

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import React from 'react';

export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage
        source={{ uri: 'https://avatars.githubusercontent.com/u/99088394?v=4' }}
      />
      <AvatarFallback>AB</AvatarFallback>
    </Avatar>
  );
}

Sizes

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { View } from '@/components/ui/view';
import React from 'react';

export function AvatarSizes() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
      <Avatar size={24}>
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback textStyle={{ fontSize: 10 }}>AB</AvatarFallback>
      </Avatar>

      <Avatar size={32}>
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback textStyle={{ fontSize: 12 }}>AB</AvatarFallback>
      </Avatar>

      <Avatar size={40}>
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>

      <Avatar size={56}>
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback textStyle={{ fontSize: 18 }}>AB</AvatarFallback>
      </Avatar>

      <Avatar size={72}>
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback textStyle={{ fontSize: 24 }}>AB</AvatarFallback>
      </Avatar>
    </View>
  );
}

Fallback Only

import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { View } from '@/components/ui/view';
import React from 'react';

export function AvatarFallbackDemo() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
      <Avatar>
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>

      <Avatar>
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>

      <Avatar>
        <AvatarFallback>MK</AvatarFallback>
      </Avatar>

      <Avatar>
        <AvatarFallback>SL</AvatarFallback>
      </Avatar>
    </View>
  );
}

Custom Styling

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { View } from '@/components/ui/view';
import React from 'react';

export function AvatarStyled() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
      <Avatar
        size={56}
        style={{
          borderWidth: 3,
          borderColor: '#3b82f6',
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback
          style={{ backgroundColor: '#3b82f6' }}
          textStyle={{ color: 'white', fontWeight: 'bold' }}
        >
          AB
        </AvatarFallback>
      </Avatar>

      <Avatar
        size={56}
        style={{
          borderWidth: 3,
          borderColor: '#10b981',
        }}
      >
        <AvatarFallback
          style={{ backgroundColor: '#10b981' }}
          textStyle={{ color: 'white', fontWeight: 'bold' }}
        >
          BNA
        </AvatarFallback>
      </Avatar>

      <Avatar
        size={56}
        style={{
          borderWidth: 3,
          borderColor: '#f59e0b',
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
          }}
        />
        <AvatarFallback
          style={{ backgroundColor: '#f59e0b' }}
          textStyle={{ color: 'white', fontWeight: 'bold' }}
        >
          EX
        </AvatarFallback>
      </Avatar>
    </View>
  );
}

Group

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { View } from '@/components/ui/view';
import React from 'react';

export function AvatarGroup() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Avatar
        size={48}
        style={{
          borderWidth: 2,
          borderColor: 'white',
          zIndex: 4,
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>

      <Avatar
        size={48}
        style={{
          borderWidth: 2,
          borderColor: 'white',
          marginLeft: -12,
          zIndex: 3,
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://reactnative.dev/img/header_logo.svg',
          }}
        />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>

      <Avatar
        size={48}
        style={{
          borderWidth: 2,
          borderColor: 'white',
          marginLeft: -12,
          zIndex: 2,
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
          }}
        />
        <AvatarFallback>EX</AvatarFallback>
      </Avatar>

      <Avatar
        size={48}
        style={{
          borderWidth: 2,
          borderColor: 'white',
          marginLeft: -12,
          zIndex: 1,
        }}
      >
        <AvatarFallback
          style={{ backgroundColor: '#6b7280' }}
          textStyle={{ color: 'white', fontSize: 12 }}
        >
          +5
        </AvatarFallback>
      </Avatar>
    </View>
  );
}

With Status

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { View } from '@/components/ui/view';
import React from 'react';

export function AvatarStatus() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>
      <View style={{ position: 'relative' }}>
        <Avatar size={56}>
          <AvatarImage
            source={{
              uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
            }}
          />
          <AvatarFallback>AB</AvatarFallback>
        </Avatar>
        <View
          style={{
            position: 'absolute',
            bottom: 0,
            right: 0,
            width: 16,
            height: 16,
            borderRadius: 8,
            backgroundColor: '#10b981',
            borderWidth: 2,
            borderColor: 'white',
          }}
        />
      </View>

      <View style={{ position: 'relative' }}>
        <Avatar size={56}>
          <AvatarFallback>BNA</AvatarFallback>
        </Avatar>
        <View
          style={{
            position: 'absolute',
            bottom: 0,
            right: 0,
            width: 16,
            height: 16,
            borderRadius: 8,
            backgroundColor: '#ef4444',
            borderWidth: 2,
            borderColor: 'white',
          }}
        />
      </View>

      <View style={{ position: 'relative' }}>
        <Avatar size={56}>
          <AvatarImage
            source={{
              uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
            }}
          />
          <AvatarFallback>EX</AvatarFallback>
        </Avatar>
        <View
          style={{
            position: 'absolute',
            bottom: 0,
            right: 0,
            width: 16,
            height: 16,
            borderRadius: 8,
            backgroundColor: '#f59e0b',
            borderWidth: 2,
            borderColor: 'white',
          }}
        />
      </View>
    </View>
  );
}

Bordered

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { View } from '@/components/ui/view';
import React from 'react';

export function AvatarBordered() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
      <Avatar
        size={64}
        style={{
          borderWidth: 4,
          borderColor: '#3b82f6',
          shadowColor: '#3b82f6',
          shadowOffset: { width: 0, height: 4 },
          shadowOpacity: 0.3,
          shadowRadius: 8,
          elevation: 8,
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/99088394?v=4',
          }}
        />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>

      <Avatar
        size={64}
        style={{
          borderWidth: 4,
          borderColor: '#10b981',
          shadowColor: '#10b981',
          shadowOffset: { width: 0, height: 4 },
          shadowOpacity: 0.3,
          shadowRadius: 8,
          elevation: 8,
        }}
      >
        <AvatarFallback>BNA</AvatarFallback>
      </Avatar>

      <Avatar
        size={64}
        style={{
          borderWidth: 4,
          borderColor: '#f59e0b',
          shadowColor: '#f59e0b',
          shadowOffset: { width: 0, height: 4 },
          shadowOpacity: 0.3,
          shadowRadius: 8,
          elevation: 8,
        }}
      >
        <AvatarImage
          source={{
            uri: 'https://avatars.githubusercontent.com/u/12504344?s=200&v=4',
          }}
        />
        <AvatarFallback>EX</AvatarFallback>
      </Avatar>
    </View>
  );
}

API Reference

Avatar

The container component that wraps the avatar image and fallback.

Prop	Type	Default	Description
`children`	`ReactNode`	-	The avatar image and fallback components.
`size`	`number`	`40`	The size of the avatar in pixels.
`style`	`ViewStyle`	-	Additional styles to apply to the avatar container.

AvatarImage

The image component that displays the user's avatar.

Prop	Type	Default	Description
`source`	`ImageSource`	-	The image source for the avatar.
`style`	`ImageProps.style`	-	Additional styles to apply to the image.

AvatarFallback

The fallback component that displays when the image fails to load or is not provided.

Prop	Type	Default	Description
`children`	`ReactNode`	-	The fallback content (usually initials or text).
`style`	`ViewStyle`	-	Additional styles to apply to the fallback container.
`textStyle`	`TextStyle`	-	Additional styles to apply to the fallback text.

Accessibility

The Avatar component is built with accessibility in mind:

Uses semantic structure for screen readers
Fallback text provides alternative content when images fail to load
Proper contrast ratios for text fallbacks
Supports dynamic text sizing

Audio Waveform Badge

On This Page

Installation Usage Examples Default Sizes Fallback Only Custom Styling Group With Status Bordered API Reference Avatar AvatarImage AvatarFallback Accessibility