Radix2Solid

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Avatar

An image element with a fallback for representing the user.

Download runnable sandbox
import { Avatar } from "@radix-solid/primitives";

import styles from "./styles.module.css";

const AvatarDemo = () => <div style={{
  "display": "flex",
  "gap": "20px"
}}>

		<Avatar.Root class={styles.Root}>

			<Avatar.Image class={styles.Image} src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" alt="Colm Tuite" />

			<Avatar.Fallback class={styles.Fallback} delayMs={600}>

				CT

			</Avatar.Fallback>

		</Avatar.Root>

		<Avatar.Root class={styles.Root}>

			<Avatar.Image class={styles.Image} src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80" alt="Pedro Duarte" />

			<Avatar.Fallback class={styles.Fallback} delayMs={600}>

				JD

			</Avatar.Fallback>

		</Avatar.Root>

		<Avatar.Root class={styles.Root}>

			<Avatar.Fallback class={styles.Fallback}>PD</Avatar.Fallback>

		</Avatar.Root>

	</div>;

export default AvatarDemo;

Features

  • Automatic and manual control over when the image renders.

  • Fallback part accepts any children.

  • Optionally delay fallback rendering to avoid content flashing.

Anatomy

Import all parts and piece them together.

import { Avatar } from "@radix-solid/primitives";

export default () => <Avatar.Root>

		<Avatar.Image />

		<Avatar.Fallback />

	</Avatar.Root>;

API Reference

Root

Contains all the parts of an avatar.

PropTypeDefault
asChildbooleanfalse

Image

The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.

PropTypeDefault
asChildbooleanfalse
onLoadingStatusChangefunction—

Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections. For more control, use the onLoadingStatusChange handler on Avatar.Image.

PropTypeDefault
asChildbooleanfalse
delayMsnumber—

Examples

Clickable Avatar with tooltip

You can compose the Avatar with a Tooltip to display extra information.

import { Avatar, Tooltip } from "@radix-solid/primitives";

export default () => <Tooltip.Root>

		<Tooltip.Trigger>

			<Avatar.Root>…</Avatar.Root>

		</Tooltip.Trigger>



		<Tooltip.Content side="top">

			Tooltip content

			<Tooltip.Arrow />

		</Tooltip.Content>

	</Tooltip.Root>;