Design System

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

AttributeUsage
Sizewe 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>
);

Screenshot of different treatments for Avatar

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>
);

Screenshot of different size variants for Avatar

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>
);

Screenshot of minimum viable AvatarGroup

Copyright © 2025 Hover Inc. All Rights Reserved.