The Avatar component is used to represent users or entities with images, initials, or icons.
Basic Usage
import { Avatar } from 'reshaped';
function App() {
return <Avatar src="https://i.pravatar.cc/300" alt="User avatar" />;
}
With Initials
Display user initials when no image is available:
<Avatar initials="JD" />
<Avatar initials="AB" color="primary" />
<Avatar initials="CD" color="positive" />
With Icon
Use icons for generic representations:
import { Avatar } from 'reshaped';
import IconUser from './icons/User';
<Avatar icon={IconUser} />
<Avatar icon={IconUser} color="primary" />
<Avatar src="/avatar.jpg" alt="User" size={8} />
<Avatar src="/avatar.jpg" alt="User" size={12} />
<Avatar src="/avatar.jpg" alt="User" size={16} />
<Avatar src="/avatar.jpg" alt="User" size={24} />
12 (48px with default base unit of 4px).
Apply color schemes to non-image avatars:
<Avatar initials="JD" color="neutral" />
<Avatar initials="AB" color="primary" />
<Avatar initials="CD" color="positive" />
<Avatar initials="EF" color="warning" />
<Avatar initials="GH" color="critical" />
Variants
Choose between solid and faded styles:
<Avatar initials="JD" variant="solid" />
<Avatar initials="JD" variant="faded" />
Squared Shape
Create rounded square avatars:
<Avatar src="/logo.png" alt="Company" squared />
<Avatar initials="CO" squared />
Responsive Sizes
Size can be responsive across breakpoints:
<Avatar
src="/avatar.jpg"
alt="User"
size={{ s: 8, m: 12, l: 16 }}
/>
Custom Image Rendering
Integrate with Next.js Image or other image components:
import { Avatar } from 'reshaped';
import Image from 'next/image';
function App() {
return (
<Avatar
src="/avatar.jpg"
alt="User"
renderImage={(props) => (
<Image {...props} width={48} height={48} />
)}
/>
);
}
Complete Example
User profile with avatar:
import { Avatar, View, Text } from 'reshaped';
import IconUser from './icons/User';
function UserProfile({ user }) {
return (
<View direction="row" gap={3} align="center">
<Avatar
src={user.avatar}
alt={user.name}
initials={user.initials}
icon={IconUser}
size={12}
/>
<View>
<Text variant="body-2" weight="semibold">
{user.name}
</Text>
<Text variant="caption-1" color="neutral-faded">
{user.email}
</Text>
</View>
</View>
);
}
Avatar Group
Display multiple avatars in a group:
import { Avatar, View } from 'reshaped';
function AvatarGroup({ users }) {
return (
<View direction="row" gap={-2}>
{users.slice(0, 3).map((user, index) => (
<Avatar
key={user.id}
src={user.avatar}
alt={user.name}
size={10}
attributes={{ style: { zIndex: users.length - index } }}
/>
))}
{users.length > 3 && (
<Avatar
initials={`+${users.length - 3}`}
size={10}
color="neutral"
variant="faded"
/>
)}
</View>
);
}
src
string
default:"undefined"
Image URL for the avatar.
alt
string
default:"undefined"
Image alt text for accessibility.
initials
string
default:"undefined"
Initials to display if no image is provided.
icon
React.ComponentType
default:"undefined"
SVG component for the icon, used when no image is provided.
size
number | responsive
default:"12"
Size of the component, base unit token number multiplier. Can be responsive.
Component color scheme.Options: neutral, critical, warning, positive, primary
Component render variant.Options: solid, faded
Change the shape to rounded square.
renderImage
function
default:"undefined"
Render prop for the image element, useful for integrating with Image components from third party frameworks like Next.js.
imageAttributes
object
default:"undefined"
Additional attributes for the image element.
className
string
default:"undefined"
Additional classname for the root element.
attributes
object
default:"undefined"
Additional attributes for the root element.