Design System · Documentation → Components → Avatar

Design guidance

When and how to use this

Use a Avatar to show a representation of a user. If an image is provided, it will show that image, otherwise it will try and parse the user's initials from the name you provide. If you don't provide anything it shows a user icon

Attribute	Usage
Size	we support sm, md, and lg avatars

React

Avatar composes Chakra's Avatar component

States

These states are implicit based on the information provided

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
  <Avatar name="Sage" src="/images/kitten--1920-1080.jpg" />
  <Avatar name="Sage Michaelson" />
  <Avatar />
</Stack>

Size

There are three sizes

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
  <Avatar size="sm" src="/images/kitten--1920-1080.jpg" />
  <Avatar size="md" src="/images/kitten--1920-1080.jpg" />
  <Avatar size="lg" src="/images/kitten--1920-1080.jpg" />
</Stack>

Grouped

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
  <AvatarGroup max={3}>
    <Avatar name="Lenny Bruce" />
    <Avatar name="Lester Bangs" />
    <Avatar name="Leonard B" />
    <Avatar />
    <Avatar />
  </AvatarGroup>
</Stack>

React Native

You can pass name and image to Avatar and it will do the best to determine what to display. If nothing is passed, a fallback "user profile" icon will be rendered.

import { XStack, Avatar } from '@hoverinc/design-system-react-native';
const App = () => (
  <XStack gap="$300">
    <Avatar name="Héctor Lavoe" />
    <Avatar name="Héctor Lavoe" image="https://i.pravatar.cc/150?u=hector" />
    <Avatar />
  </XStack>
);

Size

There are three sizes available:

import {
  XStack,
  Avatar,
  AvatarSizes,
} from '@hoverinc/design-system-react-native';
const App = () => (
  <XStack gap="$300">
    <Avatar
      size={AvatarSizes.Small}
      name="Celia Cruz"
      image="https://i.pravatar.cc/150?u=celia"
    />
    <Avatar
      size={AvatarSizes.Medium}
      name="Celia Cruz"
      image="https://i.pravatar.cc/150?u=celia"
    />
    <Avatar
      size={AvatarSizes.Large}
      name="Celia Cruz"
      image="https://i.pravatar.cc/150?u=celia"
    />
    <Avatar />
  </XStack>
);

Grouped

We support grouping/stacking of Avatar via the AvatarGroup component:

import { Avatar, AvatarGroup } from '@hoverinc/design-system-react-native';
const App = () => (
  <AvatarGroup max={3}>
    <Avatar name="Luiz Ortega" />
    <Avatar name="Paulo Sonoplasta" />
    <Avatar name="Francisco Labirintite" />
    <Avatar name="Marcela Mil Grau" />
    <Avatar name="Toninho do Diabo" />
    <Avatar name="Carina Medeiros" />
  </AvatarGroup>
);

Aspect Ratio

Badge