DAvatar
A component for displaying user avatars with image or initials.
Import
import { DAvatar } from '@dynamic-framework/ui-react';
TypeScript Interface
type Props = BaseProps & {
id?: string;
size?: AvatarSize;
image?: string;
name?: string;
useNameAsInitials?: boolean;
};
type AvatarSize = 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
type BaseProps = {
style?: CSSProperties;
className?: string;
dataAttributes?: DataAttributes;
};
Props
Unique identifier for the avatar element.
Size variant of the avatar. Options: 'xs', 'sm', 'lg', 'xl', 'xxl'.
URL of the image to display. When provided, the image takes precedence over name initials.
Name to use for generating initials or alt text. When useNameAsInitials is false, automatically extracts first letter of each word.
If true, uses the entire name as provided. If false, extracts first letter of each word and converts to uppercase.
Additional CSS classes to apply to the avatar.
Inline styles to apply to the avatar.
dataAttributes
Record<`data-${string}`, string | number | undefined | null | boolean>
Custom data attributes to add to the avatar element.
Usage Examples
Image Avatar
import { DAvatar } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<DAvatar
image="https://i.pravatar.cc/150?img=1"
name="John Doe"
size="lg"
/>
);
}
Initials Avatar
import { DAvatar } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<DAvatar
name="John Doe"
size="lg"
/>
);
}
Custom Initials
import { DAvatar } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<DAvatar
name="JD"
useNameAsInitials
size="lg"
/>
);
}
Size Variants
import { DAvatar } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex align-items-center gap-3">
<DAvatar name="John Doe" size="xs" />
<DAvatar name="John Doe" size="sm" />
<DAvatar name="John Doe" />
<DAvatar name="John Doe" size="lg" />
<DAvatar name="John Doe" size="xl" />
<DAvatar name="John Doe" size="xxl" />
</div>
);
}
Avatar Group
import { DAvatar } from '@dynamic-framework/ui-react';
export default function Example() {
const users = [
{ name: 'Alice Johnson', image: 'https://i.pravatar.cc/150?img=1' },
{ name: 'Bob Smith', image: 'https://i.pravatar.cc/150?img=2' },
{ name: 'Carol White', image: 'https://i.pravatar.cc/150?img=3' },
];
return (
<div className="d-flex">
{users.map((user, index) => (
<DAvatar
key={index}
name={user.name}
image={user.image}
size="lg"
style={{ marginLeft: index > 0 ? '-10px' : '0' }}
/>
))}
</div>
);
}