Avatar

A person's or entity's picture rendered as a fixed-size, fully circular host stacking an image layer, an initials fallback.

Ana SouzaReviewing · online

Reviewers

DKEM

View code

<div mix={[vstack({ gap: 5, align: "start" })]}>
	<div mix={[hstack({ gap: 3, align: "center" })]}>
		<Avatar size="lg">
			<Avatar.Fallback>AS</Avatar.Fallback>
			<Avatar.Image
				src={PORTRAITS.ana}
				alt="Ana Souza"
				mix={[imageFallback(), when("&[data-image-error]", hidden())]}
			/>
			<Avatar.Badge />
		</Avatar>
		<div mix={[vstack({ gap: 0, align: "start" })]}>
			<span mix={[text("sm"), weight("medium")]}>Ana Souza</span>
			<span mix={[text("xs"), fg("neutral")]}>Reviewing · online</span>
		</div>
	</div>

	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>Reviewers</span>
		<Avatar.Group aria-label="Four reviewers, three more not shown">
			<Avatar>
				<Avatar.Fallback>BL</Avatar.Fallback>
				<Avatar.Image
					src={PORTRAITS.bruno}
					alt="Bruno Lima"
					mix={[imageFallback(), when("&[data-image-error]", hidden())]}
				/>
			</Avatar>
			<Avatar>
				<Avatar.Fallback>CW</Avatar.Fallback>
				<Avatar.Image
					src={PORTRAITS.chen}
					alt="Chen Wei"
					mix={[imageFallback(), when("&[data-image-error]", hidden())]}
				/>
			</Avatar>
			<Avatar>
				<Avatar.Fallback>DK</Avatar.Fallback>
			</Avatar>
			<Avatar>
				<Avatar.Fallback>EM</Avatar.Fallback>
				<Avatar.Image
					src="/portraits/erin-moss.jpg"
					alt="Erin Moss"
					mix={[imageFallback(), when("&[data-image-error]", hidden())]}
				/>
			</Avatar>
			<Avatar.Group.Count>+3</Avatar.Group.Count>
		</Avatar.Group>
	</div>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Avatar } from "@sdxc/ui";

Renders a fixed-size, fully circular picture host sized through the data-size attribute contract ("sm", "md", or "lg"), stacking whichever image, fallback, and badge parts a consumer composes as children.

Examples

<Avatar size="lg">
	<Avatar.Image src={user.avatarUrl} alt={user.name} />
	<Avatar.Fallback>{initials}</Avatar.Fallback>
	<Avatar.Badge aria-label={t("status.online")} />
</Avatar>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in Omit<ImagePlaceholder.Props, "shape">.