Avatar
Displays a user image, initials, or icon in a circular frame with optional status indicator.
Import
tsx
import { Avatar } from '@tac-ui/native';Playground
Interactively configure the Avatar props below.
tsx
<Avatar size="md" initials="JD" />Sizes
Four sizes from compact indicators to large profile displays.
tsx
<Avatar size="sm" src="https://i.pravatar.cc/150?img=1" alt="User" />
<Avatar size="md" src="https://i.pravatar.cc/150?img=1" alt="User" />
<Avatar size="lg" src="https://i.pravatar.cc/150?img=1" alt="User" />
<Avatar size="xl" src="https://i.pravatar.cc/150?img=1" alt="User" />Initials
Text initials are shown when no image is provided.
tsx
<Avatar size="sm" initials="JD" />
<Avatar size="md" initials="AB" />
<Avatar size="lg" initials="CK" />
<Avatar size="xl" initials="MR" />Icon Fallback
An icon is displayed when neither image nor initials are available.
tsx
import { User } from '@tac-ui/icon-native';
<Avatar size="sm" icon={<User size={16} color="#71717a" />} />
<Avatar size="md" icon={<User size={20} color="#71717a" />} />
<Avatar size="lg" icon={<User size={24} color="#71717a" />} />
<Avatar size="xl" icon={<User size={28} color="#71717a" />} />Status Indicator
A status dot on the bottom-right corner indicates online presence.
tsx
<Avatar size="sm" initials="JD" status="online" />
<Avatar size="md" initials="AB" status="online" />
<Avatar size="lg" initials="AB" status="online" />
<Avatar size="xl" initials="MR" status="online" />Status with Content
Replace the status dot with custom icons for richer status indicators.
tsx
import { User } from '@tac-ui/icon-native';
<Avatar size="xl" initials="AB" statusColor="#22c55e" statusContent={<User size={8} color="#fff" />} />Status Colors
Change the status dot color to represent different states.
tsx
<Avatar size="lg" initials="ON" status="online" />
<Avatar size="lg" initials="AW" status="away" />
<Avatar size="lg" initials="OF" status="busy" />
<Avatar size="lg" initials="ID" status="offline" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" | Size of the avatar. |
| src | ImageSourcePropType | string | - | Image source — a URL string or a React Native require() resource. Falls back to initials or icon on error. |
| alt | string | - | Accessibility label for the image. Also used to derive first-character initials. |
| initials | string | - | Text initials shown when no image is available. |
| icon | React.ReactNode | - | Icon node shown when no image or initials are available. |
| status | "online" | "offline" | "busy" | "away" | - | When provided, shows a colored presence indicator dot in the bottom-right corner. |
| statusContent | React.ReactNode | - | Custom content rendered inside the status dot, such as a small icon. |
| statusColor | string | - | Custom background color for the status dot. Overrides the default color mapping for the status value. |
| style | ViewStyle | - | Additional React Native style applied to the avatar container. |