Components

Avatar

Identifies a person or entity. Fall back to initials — never to a stock silhouette.

When to useto identify a person or entity in dense UI — table rows, activity streams, assignee chips.

Import

import { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount } from "@ravnhq/efni/avatar"

Sizes

CPCPCP

<Avatar size="sm"><AvatarFallback>CP</AvatarFallback></Avatar>
<Avatar><AvatarFallback>CP</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>CP</AvatarFallback></Avatar>

With image

<Avatar>
  <AvatarImage src="…" alt="…" />
  <AvatarFallback>EF</AvatarFallback>
</Avatar>

Group

ALBMCP

<AvatarGroup>
  <Avatar><AvatarFallback>AL</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>BM</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>CP</AvatarFallback></Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

Props

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Diameter of the avatar.
`…props`	`AvatarPrimitive.Root.Props`	—	Everything Avatar passes to the element it renders.
`AvatarImage src`	`string`	—	Photo URL. Falls through to AvatarFallback on load error.
`AvatarImage alt`	`string`	—	Required for screen readers.
`AvatarFallback`	`children`	—	Initials or a Lucide Icon. Rendered when the image is missing or still loading.