Components · Avatar
Avatar
StableSince v0.0.1
Displays a user's profile picture with initials fallback.
import { Avatar } from '@nexub/react';Examples
Default
Sizes
With image
With badge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | URL of the profile image. |
| name | string | — | Full name used to generate initials when no image is provided. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls avatar dimensions. |
| badge | boolean | — | Shows a status badge on the avatar. |
| badgeColor | string | — | Colour of the status badge. |
| fallback | ReactNode | — | Custom fallback rendered when the image fails to load and no name is provided. |
On iOS & Android: Avatar
@nexub/react-nativeAlpha
import { Avatar } from '@nexub/react-native';
<Avatar src={user.photo} name={user.name} size="lg" badge />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Status | Compose a Badge. | badge adds the presence dot. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Avatar props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL. Falls back to initials when missing or broken. |
| name | string | — | Person or org name: initials and the accessible name. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | — |
| badge | boolean | — | Online/status dot. |