ProfileAvatar

The ProfileAvatar component provides a customizable avatar with an overlaying badge containing an icon. It can be used to display profile images along with status or notification icons.

Installation

npm i @licuido-ui/ui_profile-avatar

Author

• @author Akila K [email protected]

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Import component

import { ProfileAvatar } from '@licuido-ui/ui_profile-avatar';

Usage

import { ProfileAvatar } from '@licuido-ui/ui_profile-avatar';
import { Icon } from '@mui/material';

const MyComponent = () => {
  return (
    <ProfileAvatar
      imgSrc='avatar.jpg'
      variant='circular'
      icon={<Icon>notifications</Icon>}
      iconStyle={{ color: 'white' }}
    />
  );
};

Image

Props

| Prop | Type | Default | Description | | ----------- | ------------ | ------------- | --------------------------------------------------- | | className | string | '' | Additional class name for custom styling | | sx | SxProps | {} | Custom styles using MUI's sx prop system | | avatarStyle | SxProps | {} | Custom styles for the Avatar component | | variant | string | 'rounded' | Avatar variant ('rounded', 'square', or 'circular') | | imgSrc | string | '' | Image source URL for the Avatar component | | onClick | () => void | () => {} | Click event handler for the Avatar component | | icon | ReactElement | <></> | Icon for the Avatar component | | iconStyle | SxProps | {} | Custom styles for the icon | | badgeStyle | SxProps | {} | Custom styles for the badge container | | deleteIcon | ReactElement | Custom Icon | Icon for deleting the uploaded image |