Avatar | MDK

Circular avatar surface that shows a profile image with a graceful text fallback when the image fails to load.

import { Avatar } from "@tetherto/mdk-react-devkit";

Avatar exposes no documented props.

Usage

Composable image avatar with an automatic fallback. Wraps Radix UI @radix-ui/react-avatar.

Exports

Name	Description
`Avatar`	Root container (`mdk-avatar`)
`AvatarImage`	The `<img>` element (`mdk-avatar__image`)
`AvatarFallback`	Content shown while the image is loading or fails (`mdk-avatar__fallback`)

All three components accept a className prop and forward their ref. All native Radix props are also passed through.

Notes

AvatarFallback is only rendered while the image is loading or when the image fails to load; Radix handles the visibility automatically.
Size and shape are controlled via CSS — apply utility classes or override mdk-avatar dimensions via CSS variables.

Example

/** * Runnable example for Avatar. */import { Avatar, AvatarFallback, AvatarImage } from '@tetherto/mdk-react-devkit'export const AvatarExample = () => (  <div className="mdk-example-row">    <Avatar>      <AvatarImage src="https://i.pravatar.cc/40?img=1" alt="Alice" />      <AvatarFallback>AL</AvatarFallback>    </Avatar>    <Avatar>      <AvatarImage src="https://i.pravatar.cc/40?img=2" alt="Bob" />      <AvatarFallback>BO</AvatarFallback>    </Avatar>    {/* Fallback shown when image fails to load */}    <Avatar>      <AvatarImage src="/broken-url.png" alt="Charlie" />      <AvatarFallback>CH</AvatarFallback>    </Avatar>  </div>)