Overview
The UserBold component displays user profile images, initials, or icons with support for different sizes and status indicators.Basic Usage
- Code
- Preview
import { Avatar } from '@peppermint-design/devreadykit-custom';
export default function App() {
return (
<div className="flex items-center gap-4">
<Avatar
src="https://i.pravatar.cc/100?img=48"
alt="John Doe"
name="John Doe"
size="xs"
/>
<Avatar
src="https://i.pravatar.cc/100?img=32"
alt="Jane Smith"
name="Jane Smith"
size="sm"
/>
<Avatar
src="https://i.pravatar.cc/100?img=12"
alt="Jane Smith"
name="Jane Smith"
size="md"
/>
<Avatar
src="https://i.pravatar.cc/100?img=18"
alt="Jane Smith"
name="Jane Smith"
size="lg"
/>
</div>
);
}
Fallback to Initials
When the image fails to load, it automatically falls back to initials.- Code
- Preview
import Avatar from "@peppermint-design/devreadykit-custom";
export default function AvatarImageFallback() {
return (
<div className="flex items-center gap-4">
<Avatar
src="https://example.com/missing-image.jpg"
alt="Missing Image"
name="John Doe"
/>
</div>
);
}
Initials Avatars
With Name
The component automatically generates initials from the name.- Code
- Preview
import Avatar from "@peppermint-design/devreadykit-custom";
export default function AvatarInitials() {
return (
<div className="flex items-center gap-4">
<Avatar name="John Doe" size="xs" />
<Avatar name="Jane Smith" size="sm" />
<Avatar initials="AB" size="md" />
</div>
);
}
Icon Avatars
- Code
- Preview
import Avatar from "@peppermint-design/devreadykit-custom";
import { User } from "@/assets/icons/user";
export default function AvatarIconExamples() {
return (
<div className="flex items-center gap-4">
<Avatar size="xs" icon={<User />} />
<Avatar size="sm" icon={<User />} />
<Avatar size="md" icon={<User />} />
<Avatar size="lg" icon={<User />} />
</div>
);
}
Sizes
Avatars support four fixed sizes. The default size token issm (40px).
- Code
- Preview
<Avatar name="John Doe" size="xs" />
<Avatar name="John Doe" size="sm" />
<Avatar name="John Doe" size="md" />
<Avatar name="John Doe" size="lg" />
Status Badges
With Status Badge
- Code
- Preview
import Avatar from "@peppermint-design/devreadykit-custom";
export default function AvatarStatusBadges() {
return (
<div className="flex items-center gap-6">
<Avatar name="John Doe" size="xs" showBadge badgeVariant="dot" />
<Avatar name="Jane Smith" size="sm" showBadge badgeVariant="icon" />
<Avatar name="Jane Smith" size="md" showBadge badgeVariant="icon" />
<Avatar name="Jane Smith" size="lg" showBadge badgeVariant="icon" />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "sm" | Avatar size token |
| src | string | — | Image source URL |
| alt | string | — | Alt text for image |
| name | string | — | User name for initials |
| initials | string | — | Custom initials |
| icon | React.ReactNode | — | Icon to display |
| showBadge | boolean | false | Show status badge |
| badgeIcon | React.ReactNode | — | Badge icon |
| badgeVariant | "auto" | "dot" | "icon" | "auto" | Badge style |
| badgeClassName | string | — | Custom badge classes |
| className | string | — | Additional CSS classes |
Examples
User List
- Code
- Preview
import Avatar from "@peppermint-design/devreadykit-custom";
const users = [
{
id: 1,
name: "John Doe",
avatar: "https://i.pravatar.cc/100?img=12",
isOnline: true,
},
{
id: 2,
name: "Jane Smith",
avatar: "https://i.pravatar.cc/100?img=18",
isOnline: false,
},
{
id: 3,
name: "Alex Johnson",
avatar: "https://i.pravatar.cc/100?img=28",
isOnline: true,
},
];
export default function AvatarUserListExample() {
return (
<div className="space-y-3">
{users.map((user) => (
<div key={user.id} className="flex items-center gap-3">
<Avatar
src={user.avatar}
name={user.name}
size="md"
showBadge={user.isOnline}
/>
<span className="text-sm text-neutral-700">{user.name}</span>
</div>
))}
</div>
);
}
Team Members
- Code
- Preview
import Avatar from "@peppermint-design/devreadykit-custom";
const members = [
{ id: 1, name: "John", avatar: "https://i.pravatar.cc/100?img=15" },
{ id: 2, name: "Jane", avatar: "https://i.pravatar.cc/100?img=47" },
{ id: 3, name: "Alex", avatar: "https://i.pravatar.cc/100?img=20" },
{ id: 4, name: "Maria", avatar: "https://i.pravatar.cc/100?img=33" },
{ id: 5, name: "Chris", avatar: "https://i.pravatar.cc/100?img=7" },
{ id: 6, name: "Taylor", avatar: "https://i.pravatar.cc/100?img=52" },
];
export default function AvatarTeamMembersExample() {
return (
<div className="flex items-center">
{members.slice(0, 5).map((member, index) => (
<Avatar
key={member.id}
src={member.avatar}
name={member.name}
size="sm"
className="border-2 border-white -ml-2 first:ml-0"
style={{ zIndex: members.length - index }}
/>
))}
{members.length > 5 && (
<div className="ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-neutral-600">
+{members.length - 5}
</div>
)}
</div>
);
}