Avatar

Sizes

sm (24px), md (32px, default), lg (40px), and xl (48px). The fallback initials scale with the selected size.

Usage

import { Avatar } from '@cajon-ui/react';

<Avatar name="Ada Lovelace" />
<Avatar name="Grace Hopper" size="lg" />
<Avatar src="/team/ada.jpg" alt="Ada Lovelace portrait" name="Ada Lovelace" />

Accessibility

When an image renders, its alt text is exposed through the inner <img>. When the component falls back to initials, it applies an aria-label from alt, name, or "Avatar".

Props