Avatar
Person or entity image with initials fallback.
Add it to your project
Eject the complete avatar group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject avatarbash
npx toucan eject avatarapp.tsx
import { Avatar } from '@/components/toucan/avatar';Use when
A person or entity benefits from a compact visual identifier.
Avoid when
The image is editorial content rather than identity metadata.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Avatar
Avatar
Props type: AvatarProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
alt | string | undefined | No | Alternative text for the avatar image. |
initials | string | undefined | No | Fallback initials shown when no avatar image is available. |
size | "sm" | "md" | "lg" | 'md' | No | Visual size variant. |
src | string | undefined | No | Avatar image URL. |
variant | "neutral" | "primary" | 'neutral' | No | Semantic visual variant. |
Also accepts the native span attributes that are not replaced by a Toucan prop.
Type exports
AvatarProps
Accessibility
- Supply meaningful alt text for informative images; initials provide a text fallback.
Token families
avatar