Avatar
User avatar with image and fallback initials.
JS
<Avatar> <AvatarFallback>JS</AvatarFallback></Avatar>Usage
import { Avatar, AvatarFallback, AvatarImage } from "@reva/ui";Composition
Use the following composition to build an Avatar:
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadgeUse the following composition to build an AvatarGroup:
AvatarGroup
├── Avatar
│ ├── AvatarImage
│ ├── AvatarFallback
│ └── AvatarBadge
├── Avatar
│ ├── AvatarImage
│ ├── AvatarFallback
│ └── AvatarBadge
└── AvatarGroupCountExamples
With image
FC
<Avatar> <AvatarImage src="/avatar-sample.png" alt="FAB" /> <AvatarFallback>FC</AvatarFallback></Avatar>Fallback
JS
<Avatar> <AvatarFallback>JS</AvatarFallback></Avatar>Variants
Use the variant prop to switch between the solid default fill and a softer secondary fill. The variant propagates to both AvatarFallback and AvatarBadge.
DFSC
<HStack gap={6} align="center"><Avatar> <AvatarFallback>DF</AvatarFallback></Avatar><Avatar variant="secondary"> <AvatarFallback>SC</AvatarFallback></Avatar></HStack>Sizes
Use the size prop to change the size of the avatar.
SMDFLG
<HStack gap={6} align="center"><Avatar size="sm"> <AvatarFallback>SM</AvatarFallback></Avatar><Avatar> <AvatarFallback>DF</AvatarFallback></Avatar><Avatar size="lg"> <AvatarFallback>LG</AvatarFallback></Avatar></HStack>Props
| Component | Prop | Type | Description |
|---|---|---|---|
Avatar | size | "sm" | "default" | "lg" | Box: size-6, size-8, size-10. Default default. |
Avatar | variant | "default" | "secondary" | Visual fill applied to AvatarFallback and AvatarBadge. Default default. |
Avatar | … | — | Other props forwarded to the Radix Avatar root (asChild, etc.). |
AvatarImage | … | — | Radix Avatar.Image props. |
AvatarFallback | … | — | Radix Avatar.Fallback props. |
AvatarBadge | … | React.ComponentProps<"span"> | |
AvatarGroup | … | React.ComponentProps<"div"> | |
AvatarGroupCount | … | React.ComponentProps<"div"> |