Avatar
Initials fallback
Section titled “Initials fallback”When no image is provided (or the image fails to load), the fallback renders instead.
import { Avatar } from '@eekodigital/raster';
<Avatar.Root>
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>With image
Section titled “With image”Provide an Avatar.Image. Radix handles the load/error state and shows the Fallback if the image fails.
<Avatar.Root>
<Avatar.Image src="/avatar.jpg" alt="Jane Doe" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>Three sizes: sm (2rem), md (2.5rem, default), lg (3.5rem).
<Avatar.Root size="sm"><Avatar.Fallback>SM</Avatar.Fallback></Avatar.Root>
<Avatar.Root size="md"><Avatar.Fallback>MD</Avatar.Fallback></Avatar.Root>
<Avatar.Root size="lg"><Avatar.Fallback>LG</Avatar.Fallback></Avatar.Root>Square
Section titled “Square”Use square for organisation logos and non-person avatars.
<Avatar.Root square size="md"><Avatar.Fallback>OG</Avatar.Fallback></Avatar.Root>Avatar.Root
Section titled “Avatar.Root”| Prop | Type | Default | Description |
|---|---|---|---|
size | ”sm” | “md” | “lg" | "md” | Diameter of the avatar. |
square | boolean | false | Rounded square instead of circle. |
className | string | — | Additional CSS classes. |
Avatar.Image
Section titled “Avatar.Image”| Prop | Type | Description |
|---|---|---|
src | string | Image URL. |
alt | string | Accessible alt text. |
Avatar.Fallback
Section titled “Avatar.Fallback”| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Typically 1–2 initials. |
delayMs | number | 600 | Delay before fallback renders (avoids flash on slow images). |