@licuido-ui/ui_profile-avatar NPM

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 akila@crayond.co

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.1

8 months ago