On This Page
Avatars
User profile image representations with status dots and fallbacks.
When to use
default avatarProfile settings, headers, user menus, comment authorsstack avatarColleague lists, project members list, active chat members groupsdotted / pulse avatarIndicating active online, away, or busy status in messaging appsinitials fallbackDefault render state when a user hasn't uploaded a photo or image load failsInteractive Playground
Live CanvasInteractive
NX
Default Avatar
CN
component.tsx
Stack Avatar
component.tsx
Dotted Avatar
component.tsx
Shadow Avatar
component.tsx
Polymorph Avatar
component.tsx
Page 1 of 2
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | The image source URL for the avatar. |
| fallback | string | — | Initials to display as a fallback if the image fails to load. |
| className | string | — | Additional custom class names. |
♿ Accessibility (a11y)
- Image Fallbacks: If the image fails to load or the source URL is invalid, the component automatically hides the image and displays the initials fallback, ensuring a consistent visual appearance.
- ARIA labels: Avatars should include descriptive alt text or labels (e.g. `aria-label="User Profile"`) if they function as interactive links or icons.