Avatar

An avatar represents a person with a profile image. Its fallback stands in while the image loads and when it is missing, so users can always tell who is meant.

UsageCopy Anchor Link

import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "@biem/ui/components/ui/avatar";
import { generateGradient } from "@biem/ui/lib/generate-gradient";

const portrait = generateGradient("Name");

export function AvatarDefault() {
	return (
		<Avatar>
			<AvatarImage src={portrait} alt="Name"/>
			<AvatarFallback>L</AvatarFallback>
		</Avatar>
	);
}

ExamplesCopy Anchor Link

FallbackCopy Anchor Link

New employees and external contacts often have no profile image yet. Without an image, AvatarFallback takes its place right away, for example with the initials of the person, so users can still tell the people in a list apart.

SmallCopy Anchor Link

Table rows and activity feeds name a person beside every entry, such as the employee who booked a transfer. There, size set to "sm" lets the avatar accompany the entry without pushing the figures aside.

Default SizeCopy Anchor Link

Comments, approvals and assignments show the person behind a decision. Whenever no other size is set, an avatar takes the size "default", so people appear at the same scale across every product.

LargeCopy Anchor Link

A profile header or the detail view of an employee puts one person at the center. Here, size set to "lg" gives the avatar more presence, so users see at once whose data they are working with.

BadgeCopy Anchor Link

Whether a colleague is on shift or has approved a request often matters as much as who that colleague is. Through AvatarBadge the avatar carries a marker for such a status, so users take in the person and the state together.

Badge with IconCopy Anchor Link

A plain marker tells users that a status applies, but not which one. Placed inside the badge, an icon names it, so users can tell several states apart without a legend. Small avatars leave too little room for it, and the badge then shows the marker alone.

GroupCopy Anchor Link

Shifts, store visits and stock counts often involve several people at once. Gathered in an AvatarGroup, their avatars stay compact, so users see at a glance who shares the task.

Group CountCopy Anchor Link

Some teams are larger than the room a group can offer. Closing the group, AvatarGroupCount states how many more people belong to it, so users grasp the size of the team without a face for every member.

Group Count with IconCopy Anchor Link

Not every group needs an exact number, for example where a team changes in the course of the day. With an icon in place of the number, AvatarGroupCount signals that more people belong to the group without stating how many.

API ReferenceCopy Anchor Link

AvatarCopy Anchor Link

AvatarImageCopy Anchor Link

AvatarFallbackCopy Anchor Link

AvatarBadgeCopy Anchor Link

AvatarBadge places a marker on the bottom right corner of the avatar. It renders a span and has no props of its own.

AvatarGroupCopy Anchor Link

AvatarGroup stacks avatars so that they overlap. It renders a div and has no props of its own.

AvatarGroupCountCopy Anchor Link

AvatarGroupCount ends a group with a count of further avatars or an icon. It renders a div and has no props of its own.