Avatar

import { Avatar, AvatarFallback, AvatarImage } from "@hel/ui/avatar"
import { Flex } from "@hel/ui/flex"

When to use it#

Use an avatar next to a name to make people easy to spot: in a comment, a list of members, a table of assignees, the account menu. It works with a name beside it, or alone when the name is clear from context.

Avatars show people and teams. For a count, a status or a label, use a Badge.

Import#

Copyimport {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarBadge,
  AvatarGroup,
} from "@hel/ui/avatar"

Anatomy#

Put an AvatarImage and an AvatarFallback inside an Avatar. The image loads first, and the fallback shows until it has loaded, or for good if it fails. The second avatar in the preview has a broken image, so it shows its initials.

Copy<Avatar size="lg">
  <AvatarImage src="/avatars/01.png" alt="Maya Torres" />
  <AvatarFallback>MT</AvatarFallback>
</Avatar>

Always give the image an alt with the person's name, and keep the fallback to one or two letters.

Examples#

Sizes#

size is xs, sm, md or lg, and the default is xs. They match the heights of the buttons and fields of the same size, so an avatar lines up with them in a row.

import { Avatar, AvatarFallback, AvatarImage } from "@hel/ui/avatar"
import { Flex } from "@hel/ui/flex"

Status badge#

AvatarBadge is a small circle on the bottom corner. Color it with className for a status dot, or put an icon inside it. Give it an aria-label, because a color alone is not read out.

import { Check } from "lucide-react"

import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@hel/ui/avatar"

Group#

AvatarGroup overlaps avatars into a stack, with a ring in the page color to keep them apart. Its size is sm, md or lg, and it should match the size of the avatars inside. The overlap follows the reading direction. End the group with an avatar that shows how many more there are.

import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@hel/ui/avatar"
import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

Props#

Avatar#

AvatarImage#

It takes the props of an img, such as src and alt.

AvatarFallback#

delay waits before showing the fallback, so it does not flash for images that load fast.

AvatarBadge#

It takes the props of a span. Set the color with className.

AvatarGroup#