Avatar
Avatar displays a profile picture or a color background with initials.Import
import { Avatar } from "@prismane/core";
Usage
By default, if no initials or image are provided, Avatar uses a placeholder icon.
<Avatar />
Custom Placeholder Icon
By providing an icon as a direct child of Avatar, you can overwrite our placeholder icon.
<Avatar> <User weight="bold" size={36} /> </Avatar>
Image Avatar
<Avatar src="https://i.pinimg.com/originals/a7/3b/3d/a73b3d77e2fdca58f57e568ddcfab1a5.jpg" />
Initials Avatar
By default, Avatar uses the base color, if no source is provided.
<Avatar>MP</Avatar>
Color Avatar
<> <Avatar color="ruby">MP</Avatar> <Avatar color="copper">MP</Avatar> <Avatar color="teal">MP</Avatar> </>
Avatar Sizes
<> <Avatar size="xs">MP</Avatar> <Avatar size="sm">MP</Avatar> <Avatar size="base">MP</Avatar> <Avatar size="md">MP</Avatar> <Avatar size="lg">MP</Avatar> </>
API
Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.
- -
Avatar