Avatar

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

Import

import { Avatar, AvatarBadge, 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"
/>

Avatar with icon

EDITABLE EXAMPLE

<HStack spacing="md">
  <Avatar />
  <Avatar fontFamily="AntDesign" icon="user" />
</HStack>

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	Yes	gray

`icon`

The icon property, icon is used as fallback when name, and src is not specified.

Type	Required
string, React Element	No

`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
string	No

`size`

The size property, defining the size of avatar

Type	Required
string	No

`src`

The src property. The source of avatar image

Type	Required
string	No

AvatarGroup props

Extends every Stack props.

`size`

The size property, defining the size of Avatar childrens

Type	Required
string	No

`max`

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

Type	Required
number	No

AvatarBadge props

Extends every Box props.

Badge Divider