Component
Avatar
A circular identity marker: a photo when one exists, otherwise initials over a color derived from the person's name, so the same name always lands on the same color.
Standalone
JL
MD
PS
avatar.tsx
<NativeAvatar name="Jordan Lee" size="lg" />
<NativeAvatar name="Morgan Diaz" size="lg" />
<NativeAvatar name="Priya Shah" size="lg" />Example
An unread-count badge wraps the avatar, marking that the most recent message from this person hasn't been read.
JL
1
avatar-example.tsx
<NativeBadge count={1} variant="red">
<NativeAvatar name="Jordan Lee" size="lg" />
</NativeBadge>Capabilities
| Prop | Type | Description |
|---|---|---|
| src | string | null | Image URL - if missing, shows initials |
| name | string | Used to derive initials if no src |
| size | NativeAvatarSize | - |
| badge | React.ReactNode | Badge slot - rendered in bottom-right corner |
| className | string | - |