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.
The primitive
JL
MD
PS
avatar.tsx
<NativeAvatar name="Jordan Lee" size="lg" />
<NativeAvatar name="Morgan Diaz" size="lg" />
<NativeAvatar name="Priya Shah" size="lg" />Example
A contact row pairs the avatar with a small status badge in its corner, 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 | — |