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
1
Stack Avatar
component.tsx
1
Dotted Avatar
component.tsx
1
Shadow Avatar
component.tsx
1
Polymorph Avatar
component.tsx
1
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.