@licuido-ui/ui_avatar NPM

Avatar

Avatars are found throughout material design with uses in everything from tables to dialog menus.

Author

@author Vigneshwaran vigneshwaran@crayond.co

Link

Story Book Link Avatar

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_avatar

Import component

import { Avatar } from '@licuido-ui/ui_avatar';

<Avatar
  avatarData={[]}
  fontSize=""
  />

Usage

<Avatar
  avatarData={[]}
  fontSize="14px"
  backgroundColor="#f0f0f0"
  dummyAvatarBackgroundColor='#CBCBCB'
  borderColor="#ccc"
  border="1px solid"
  height="50px"
  width="50px"
  max={3}
  handleAvatarGroupClick={(e) => console.log('Avatar Group Clicked!', e)}

Image

alt text

Props

Prop Name	Type	Description
`className`	string	Override class name for additional styling.
`sx`	SxProps or SxProps[]	System overrides and additional CSS styles.
`avatarData`	AvatarInterface[]	An array of objects containing data for individual avatars (see `AvatarInterface` for details).
`fontSize`	string	Font size of the avatars.
`backgroundColor`	string	Background color of the avatars.
`avatarBackgroundColor`	string	Background color of the dummy avatars.
`borderColor`	string	Border color of the avatars.
`border`	string	Border style of the avatars.
`height`	string	Height of the avatars.
`width`	string	Width of the avatars.
`variant`	'rounded' or 'square' or 'circular' or AvatarGroupPropsVariantOverrides	Variant of the avatar (either 'rounded', 'square', 'circular', or an object for additional variant overrides).
`max`	number	Maximum number of avatars to display in the `AvatarGroup`.
`handleAvatarGroupClick`	(e: React.MouseEvent) => void \| undefined	Callback function triggered on `AvatarGroup` click.

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

@licuido-ui/react

3.0.2

8 months ago