Skip to content
Docs
Components
Avatar

Avatar

Component to represent user, and displays the profile picture, initials or fallback icon.

Import

import { Avatar, AvatarGroup } from "react-native-ficus-ui";

Usage

Avatar with photo

EDITABLE EXAMPLE
<Avatar
  name="Nicolas Torion"
  src="https://avatars.githubusercontent.com/u/53612278?v=4"
/>

Generated color

EDITABLE EXAMPLE
<HStack spacing="md">
  <Avatar name="Nicolas Torion" size="xs" />
  <Avatar name="Omar Borji" size="sm" />
  <Avatar name="Deelan" size="md" />
  <Avatar name="Mark Cavendish" size="lg" />
  <Avatar name="Antoine Dupont" size="xl" />
</HStack>

Color scheme

EDITABLE EXAMPLE
<HStack spacing="md">
  <Avatar name="Nicolas Torion" size="xs" colorScheme="blue" />
  <Avatar name="Omar Borji" size="sm" colorScheme="orange" />
  <Avatar name="Deelan" size="md" colorScheme="green" />
  <Avatar name="Mark Cavendish" size="lg" colorScheme="red" />
  <Avatar name="Antoine Dupont" size="xl" colorScheme="purple" />
</HStack>

Avatar group

EDITABLE EXAMPLE
<VStack spacing="md">
  <AvatarGroup>
    <Avatar
      name="Nicolas Torion"
      src="https://avatars.githubusercontent.com/u/53612278?v=4"
    />
    <Avatar
      name="Omar Borji"
      src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
    />
    <Avatar name="Deelan" colorScheme="green" />
    <Avatar name="Mark Cavendish" colorScheme="red" />
    <Avatar name="Antoine Dupont" colorScheme="purple" />
    <Avatar name="Zinédine Zidane" colorScheme="pink" />
  </AvatarGroup>

  <AvatarGroup size="lg" max={2}>
    <Avatar
      name="Nicolas Torion"
      src="https://avatars.githubusercontent.com/u/53612278?v=4"
    />
    <Avatar
      name="Omar Borji"
      src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
    />
    <Avatar name="Deelan" colorScheme="green" />
    <Avatar name="Mark Cavendish" colorScheme="red" />
    <Avatar name="Antoine Dupont" colorScheme="purple" />
    <Avatar name="Zinédine Zidane" colorScheme="pink" />
  </AvatarGroup>
</VStack>

Avatar badge

EDITABLE EXAMPLE
<HStack spacing="md">
  <Avatar
    name="Nicolas Torion"
    src="https://avatars.githubusercontent.com/u/53612278?v=4"
  >
    <AvatarBadge />
  </Avatar>
  <Avatar
    name="Omar Borji"
    src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
  >
    <AvatarBadge bg="orange.500" borderColor="orange.100" />
  </Avatar>
  <Avatar name="Deelan" colorScheme="green">
    <AvatarBadge bg="orange.500" borderColor="orange.100" />
  </Avatar>
</HStack>

Avatar badge and group

EDITABLE EXAMPLE
<HStack spacing="md">
  <AvatarGroup size="lg">
    <Avatar
      name="Nicolas Torion"
      src="https://avatars.githubusercontent.com/u/53612278?v=4"
    >
      <AvatarBadge />
    </Avatar>
    <Avatar
      name="Omar Borji"
      src="https://avatars.githubusercontent.com/u/80390318?s=60&v=4"
    >
      <AvatarBadge bg="orange.500" borderColor="orange.100" />
    </Avatar>
    <Avatar name="Deelan" colorScheme="green">
      <AvatarBadge bg="orange.500" borderColor="orange.100" />
    </Avatar>
  </AvatarGroup>
</HStack>

Props

Extends every Box and Text props.

colorScheme

The colorScheme property, will define background color and text color.

TypeRequiredDefault
stringNo`gray`

name

The name property representing the name of the person in the avatar. If src has loaded, the name will be used as the alt attribute of the img, else, the name will be used to create the initials.

TypeRequiredDefault
stringYes

size

The size property, defining the size of the avatar.

TypeRequiredDefault
numberNo

src

The src property. The source of the avatar image.

TypeRequiredDefault
stringNo

AvatarGroup props

size

The size property, defining the size of Avatar children.

TypeRequiredDefault
stringNo

max

The max property, defining the max number of Avatar children that should be displayed. If there are more to display, an item indicating the number of other avatars will be displayed.

TypeRequiredDefault
numberNo