Avatars

The Avatar component is used to represent user, and displays the profile picture, initials or a fallback icon.

Import

• Avatar: The image that represents the user.
• AvatarBadge: A wrapper that displays it's content on the on the right corner of the avatar.
• AvatarGroup: A wrapper to stack multiple Avatars together.

import { Avatar, AvatarBadge, AvatarGroup } from '@outfitio/outkit';

Usage

Avatar Sizes

The Avatar component comes in 7 sizes - 2xs, xs, sm, md, lg, xl, 2xl

Avatar Fallbacks

If the user has not specified an avatar image, there are 2 fallbacks:

• If there's a name prop, we use it to generate the initials and a random, accessible background color.
• If there's no name prop, we use a default avatar.

Avatar with badge

You can use the AvatarBadge to show a user is online.

Note the use of em for the size of the AvatarBadge. This is useful to size the badge relative to the avatar font size

AvatarGroup

In some cases, you might need to stack avatars as a group. Use the AvatarGroup component.

• To limit the amount of avatars to show, use the max prop. It'll truncate the avatars and show a "+X" label, where X is the remaining avatars.
• To size all the avatars equally, pass the size prop on the AvatarGroup.
• To adjust the spacing between the avatars, pass the spacing prop.

Accessibility

• The avatar component represents content and should have a text equivalent for users using assistive technologies. If the avatar does not appear alongside a text label, use the name prop as alt text.

Best Practice

• When using an avatar group, include a max prop to limit the number of avatars.

Props

The Avatar component composes Box component so you can pass props for Box.