Avatar
Displays user profile images, initials, or icons.
Source
LLM docs
Package
Examples
7
Properties
42
Playground
Basics
Illustrates loading an avatar image with a reliable initials fallback for offline scenarios.
Loading demo…
import { Avatar } from '@plocks/ui';
export function Demo() {
return (
<Avatar
src={require('../../../../assets/avatars/avatar-1.png')}
fallback="JD"
size="xl"
/>
);
}Sizes
Choose a
size token (xs through 3xl) to scale the avatar.Loading demo…
import { Avatar, Row } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Avatar key={size} size={size} fallback={size} />
))}
</Row>
);
}Icon
Render any
<Icon> inside an avatar by passing it to the fallback prop.Loading demo…
import { Avatar, Icon, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" align="center">
<Avatar
fallback={<Icon name="user" color="white" />}
bg="#6366f1"
/>
<Avatar
fallback={<Icon name="camera" color="white" />}
bg="#10b981"
/>
<Avatar
fallback={<Icon name="bell" color="white" />}
bg="#f59e0b"
/>
<Avatar
fallback={<Icon name="settings" color="white" />}
bg="#ef4444"
/>
</Row>
);
}Colors
Preview semantic color tokens and custom hex backgrounds applied to avatar fallbacks.
Loading demo…
import { Avatar, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="md" wrap="wrap">
<Avatar fallback="PR" bg="primary.5" />
<Avatar fallback="SU" bg="success.5" />
<Avatar fallback="WA" bg="warning.5" />
<Avatar fallback="ER" bg="error.5" />
<Avatar fallback="AB" bg="#FF6B6B" />
</Row>
);
}Groups
Showcases how
AvatarGroup overlaps avatars by default to conserve space.Loading demo…
import { Avatar, AvatarGroup } from '@plocks/ui';
const TEAM = [
{ id: 1, initials: 'SJ', color: '#FF6B6B' },
{ id: 2, initials: 'MC', color: '#4ECDC4' },
{ id: 3, initials: 'ER', color: '#45B7D1' },
{ id: 4, initials: 'DL', color: '#96CEB4' },
{ id: 5, initials: 'KP', color: '#FFEAA7' },
{ id: 6, initials: 'TW', color: '#DDA0DD' },
{ id: 7, initials: 'AB', color: '#FFB6C1' }
];
export function Demo() {
return (
<AvatarGroup>
{TEAM.map(({ id, initials, color }) => (
<Avatar key={id} fallback={initials} bg={color} />
))}
</AvatarGroup>
);
}Overflow
Set
limit to cap visible avatars and show the remaining count. Pass surplusTooltip to reveal who's hidden on hover.Loading demo…
import { Avatar, AvatarGroup } from '@plocks/ui';
const TEAM = [
{ id: 1, name: 'Sarah Johnson', initials: 'SJ', color: '#FF6B6B' },
{ id: 2, name: 'Marcus Chen', initials: 'MC', color: '#4ECDC4' },
{ id: 3, name: 'Elena Ruiz', initials: 'ER', color: '#45B7D1' },
{ id: 4, name: 'David Lee', initials: 'DL', color: '#96CEB4' },
{ id: 5, name: 'Kira Patel', initials: 'KP', color: '#FFEAA7' },
{ id: 6, name: 'Tom Ward', initials: 'TW', color: '#DDA0DD' },
{ id: 7, name: 'Aisha Bello', initials: 'AB', color: '#FFB6C1' }
];
const LIMIT = 3;
export function Demo() {
const hidden = TEAM.slice(LIMIT).map((member) => member.name);
return (
<AvatarGroup limit={LIMIT} surplusTooltip={hidden.join(', ')}>
{TEAM.map(({ id, initials, color }) => (
<Avatar key={id} fallback={initials} bg={color} />
))}
</AvatarGroup>
);
}Status indicator
Demonstrates the
online presence indicator, including custom indicatorColor overrides for alternate states.Loading demo…
import { Avatar, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="xl" wrap="wrap">
<Avatar
src={require('../../../../assets/avatars/avatar-1.png')}
label="Josh"
description="Online"
online
/>
<Avatar
src={require('../../../../assets/avatars/avatar-3.png')}
label="Mike"
description="Focus time"
online
indicatorColor="#f59e0b"
/>
<Avatar
src={require('../../../../assets/avatars/avatar-4.png')}
label="Tori"
description="Offline"
/>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources