data-display / stable

Avatar

Picture of a person (circle) or company (rounded square) with an initials fallback.

LIVE PREVIEW

Loading preview…

When to use

Assignees, authors, attendees and owners — `shape="person"`.
Clients and organisations — `shape="company"`.
Several people at once — AvatarGroup with `max`.

Consider an alternative

Generic icons or status — use an icon or StatusIcon.
Large profile pictures in a hero — use an image.

Import

import { Avatar } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


name	string	—	Person or company name: initials fallback, image alt and accessible name.
shape	AvatarShape	—	`person` (circle, default) or `company` (rounded square).
size	AvatarSize	—	16 · 20 · 24 · 32 · 40 px. Default `lg` (32px, the old shadcn size) or the AvatarGroup's size.
src	string	—	Image URL. With `src`/`name` and no children, the Avatar renders image + initials itself.
children	ReactNode	—
className	string	—

Related exports

AvatarImage, AvatarFallback, AvatarGroup

Examples

Sizes and shapes

16 · 20 · 24 · 32 · 40 px. People are circles; companies rounded squares.

<Avatar name="Ada Lovelace" size="md" />
<Avatar name="Acme Corp" shape="company" size="lg" />

Image with fallback

Initials show while the image loads and when it fails.

<Avatar name={user.name} src={user.avatarUrl} />
// shadcn-compatible compound form:
<Avatar><AvatarImage src={url} alt={name} /><AvatarFallback>GH</AvatarFallback></Avatar>

Group

Overlapping stack with a +N chip past `max`.

<AvatarGroup max={4} size="md">
  {assignees.map((a) => <Avatar key={a.id} name={a.name} src={a.avatarUrl} />)}
</AvatarGroup>

Literal anatomy 1

Static component anatomy; bind events in the consuming app.

<AvatarGroup><Avatar name="Ada Lovelace" /><Avatar name="Grace Hopper" /></AvatarGroup>

Literal anatomy 2

Static component anatomy; bind events in the consuming app.

<Avatar><AvatarImage /><AvatarFallback>AL</AvatarFallback></Avatar>

Related components

Badge ↗