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.

Type	Required	Default
string	No	`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.

Type	Required	Default
string	Yes

`size`

The size property, defining the size of the avatar.

Type	Required	Default
number	No

`src`

The src property. The source of the avatar image.

Type	Required	Default
string	No

AvatarGroup props

`size`

The size property, defining the size of Avatar children.

Type	Required	Default
string	No

`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.

Type	Required	Default
number	No

Migration from V1 Badge