avatar

32 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Avatar.Image onLoadingStatusChange callback

Avatar.Image accepts an onLoadingStatusChange callback with signature (status: "idle" | "loading" | "loaded" | "error") => void, which provides information about the loading status of the image for precise control over what to render as the image loads.

Avatar component anatomy

Avatar has three parts: Avatar.Root which contains all parts, Avatar.Image which renders the image and loads it automatically, and Avatar.Fallback which renders when the image hasn't loaded or if there was an error.

Avatar with Tooltip composition example

Avatar can be composed with Tooltip to display extra information: import { Avatar, Tooltip } from "radix-ui"; export default () => ( <Tooltip.Root> <Tooltip.Trigger> <Avatar.Root>…</Avatar.Root> </Tooltip.Trigger> <Tooltip.Content side="top"> Tooltip content <Tooltip.Arrow /> </Tooltip.Content> </Tooltip.Root> );

Avatar basic anatomy code example

The basic Avatar structure: import { Avatar } from "radix-ui"; export default () => ( <Avatar.Root> <Avatar.Image /> <Avatar.Fallback /> </Avatar.Root> );

Avatar automatic image loading

Avatar.Image renders automatically when the image has loaded, providing automatic control over when the image is displayed.

Avatar.Fallback asChild prop

Avatar.Fallback accepts an asChild prop (boolean, default false) to change the default rendered element for the one passed as a child, merging their props and behavior.

Avatar.Fallback delayMs prop

Avatar.Fallback accepts a delayMs prop (number type) to delay rendering, which is useful to avoid content flashing and only show the fallback for those with slower connections.

Avatar.Fallback renders during loading or error

Avatar.Fallback is an element that renders when the image hasn't loaded, including while it's loading or if there was an error.

Avatar image referrerPolicy check

Check for referrerPolicy when checking the image loading status in Avatar.

Avatar prevent image flash

Prevent image flash in Avatar.

Avatar crossOrigin prop

Add support for crossOrigin in Avatar images.

Avatar image flash when cached

Fix Avatar flashing when an image is already cached.

Avatar color cyan example

Example: <Avatar variant="solid" color="cyan" fallback="A" /> displays an avatar with cyan color.

Avatar color indigo example

Example: <Avatar variant="solid" color="indigo" fallback="A" /> displays an avatar with indigo color.

Avatar variant soft example

Example: <Avatar variant="soft" fallback="A" /> displays an avatar with soft visual style.

Avatar variant solid example

Example: <Avatar variant="solid" fallback="A" /> displays an avatar with solid visual style.

Avatar size 1 example

Example showing Avatar with size prop set to 1.

Avatar fallback as text and custom elements

The fallback prop accepts text strings like 'A' or 'AB', or custom elements such as SVG icons wrapped in Box components.

Avatar radius prop values

Avatar supports radius prop with values: none, large, and full, to control the border radius of the avatar.

Avatar highContrast prop

Avatar has a highContrast prop that increases color contrast with the background when set to true.

Avatar fallback text example

Example: <Avatar fallback="A" /> and <Avatar fallback="AB" /> display avatars with single and double character fallbacks.

Avatar fallback SVG icon example

Example showing Avatar with a custom SVG icon as fallback: <Avatar fallback={<Box width="24px" height="24px"><svg viewBox="0 0 64 64" fill="currentColor"><path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" /></svg></Box>} />

Avatar basic usage with src and fallback

Avatar component can display a profile picture using the src prop, and will show a fallback when the image is not available. The fallback prop accepts text or custom elements.

Avatar size prop values

Avatar supports size values from 1 to 8, controlling the size of the avatar display.

Avatar variant prop options

Avatar has two variant options: solid and soft, controlling the visual style of the avatar.

Avatar color prop options

Avatar accepts a color prop to assign specific colors. Available colors include indigo, cyan, orange, crimson, and gray.

Avatar highContrast with color indigo

Example: <Avatar variant="solid" color="indigo" fallback="A" highContrast /> displays an avatar with indigo color and high contrast enabled.

Avatar radius none example

Example: <Avatar radius="none" fallback="A" /> displays an avatar with no border radius.

Avatar radius large example

Example: <Avatar radius="large" fallback="A" /> displays an avatar with large border radius.

Avatar radius full example

Example: <Avatar radius="full" fallback="A" /> displays an avatar with full circular border radius.

Avatar color orange example

Example: <Avatar variant="solid" color="orange" fallback="A" /> displays an avatar with orange color.

Avatar color crimson example

Example: <Avatar variant="solid" color="crimson" fallback="A" /> displays an avatar with crimson color.

Give your agent this brain